Question

所以，我有一个完全流畅的网页。有一个宽度为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％，则行为将像我想要的那样（图像将立即调整大小，因为图像将是div的宽度的100％）。但我不能让图像像那样......

Answer 1

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

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

$(window).resize(function() {
    $("img").width( $("img").parent().width() / ratio + "px" );
});

以div为中心的流体动态图像 - 立即调整div的大小

1 个答案: