1

所以，我有一个完全流畅的网页。有一个宽度为 100% 的父 DIV，并且在一个带有样式的 IMAGE 内：

<div>
     <img src="image.png" alt="" />
</div>

<style>
    div{ width:100% }
    img{
      display: block;
      margin: auto;
      max-width: 100%;
    }
</style>

图像以 div 为中心。我不知道图像的大小，但它总是比父 DIV 小，所以从 img 边框到 div 边框都有空白。现在，当您调整浏览器大小时，图像不会调整大小，直到父 DIV 到达图像的边界。

如果图像的样式宽度为：100%，那么它将超出实际尺寸...

我希望在调整浏览器窗口大小时立即使用 div 缩放此图像。如果图像画布是父 div 的 100%，则行为就像我想要的那样（图像会立即调整大小，因为图像将是 100% od div 的宽度）。但我不能让图像像那样......

4

1 回答 1

2

我认为纯 CSS 不可能，但你可以使用一些 jQuery - http://jsfiddle.net/UcV7y/

var ratio = $("img").parent().width() / $("img").width();

$(window).resize(function() {
    $("img").width( $("img").parent().width() / ratio + "px" );
});
​
于 2012-07-05T10:57:10.253 回答