20

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

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

浏览器下载图像后，使用以下 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

4

1 回答 1

34

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

但是由于您能够事先确定图像的纵横比，您可以尝试通过在图像周围添加一个额外的占位符元素来尝试“解决方法”——并利用padding以百分比给出的值总是基于宽度计算的事实一个元素，即使对于 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没有高度的元素，但是有一个 padding-top——这将给它一个实际的“高度”，即计算出的 100% 宽度的 50%。（这将是一个宽高比为的图像2:1——因为3:1padding-top 值相应地必须是 33.333%——等等，基本上height/width*100。）

甚至在图像加载之前，这应该跨越我们的占位符。

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

The only thing that might be problematic is rounding that has to occur for values with decimal points – 33.333% of 1000 pixels would be 333.33 pixels, and the browser has to round that down to 333 pixels. Should the resized image have an actual height of 334 pixels however, it would just flow out of the area the placeholder div is spanning up by that one pixel. May depend on the actual layout (and your fetish for pixel-perfect accuracy) whether that’s acceptable or not.

于 2013-03-20T10:44:17.450 回答