Question

对于我的移动网站，我想显示具有两个约束的不同但已知高度/宽度的图像：

图片应占据浏览器视图的整个宽度
相应地缩放（向下或向上）高度以保持比例

只要浏览器下载图像，使用以下CSS就可以轻松实现：

<img src="myImageURl" style="width: 100%; height: auto;" />

但是因为加载图像需要一些时间，所以我希望浏览器在下载之前布局图像。因此，一旦获取图像，浏览器就不需要重新呈现页面。我尝试了以下方法，但都失败了：

// The image is not layouted before fetched
<img src="myImageURl" height="myImageHeight" width="myImageWidth" style="width: 100%; height: auto;" /> 

// The image is layouted, but wrong: height is not proportional to the width anymore
<img src="myImageURl" style="width: 100%; height: myImageHeight;" />

我会在这里得到一些帮助。但是请在CSS中，如果我不需要，我不想使用Javascript / jQuery。

更新

我想我不是唯一遇到此问题的人：https://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height

Answer 1

正如Pete所说，在下载图像之前你不能进行任何（自动）计算，因此浏览器知道它的宽度和高度。

但是由于您可以预先确定图像的宽高比，您可以通过在图像周围添加额外的占位符元素来尝试“解决方法” - 并利用padding values given in percentage always are calculated based on the width of an element, even for padding-top/-bottom的事实。

看起来像这样：

<div style="position:relative; width:100%; height:0; padding-top:50%;">
  <img style="position:absolute; top:0; left:0; width:100%;" src="…">
</div>

这是一个div元素，没有高度，但有一个填充顶部 - 这将使它的实际“高度”为计算出的100％宽度的50％。（那对于宽高比为2:1的图像 - 对于3:1，填充顶部值必须相应地为33.333％ - 依此类推，基本上为height/width*100。）< / p>

即使在加载图像之前，它应该会占据我们的占位符。

图像本身绝对位于相对定位的占位符内 - 确保它显示在文档中的相同位置。

可能唯一有问题的是对于带有小数点的值必须进行舍入 - 1000像素的33.333％将是333.33像素，并且浏览器必须将其舍入为333像素。如果调整大小的图像具有334像素的实际高度，则它将仅流出占位符div跨越该一个像素的区域。可能取决于实际布局（以及您对像素完美准确度的迷信）是否可接受。

CSS图像在图像加载前进行布局

1 个答案: