html - 流体图像 : How to set width and height?

Question

我正在尝试构建一个流畅的布局，为此我正在为大图像设计样式:

.fluid_img {
  height: auto;
  width: auto;
  max-width: 100%;
}

这很好用，问题是我不能再在 html img 标签中使用 width 和 height 属性(它们将不起作用)。我需要这些属性，以便浏览器可以在图像加载之前“保存”图像所需的空间，这样页面的其余部分就不会在图像加载时移动。

有没有什么办法可以同时拥有这两个功能？ (流体图像 + 图像加载前节省的空间)

Answer 1

我也在寻找这个问题的答案。与 max-width , width=和 height= ，浏览器有足够的数据，它应该能够为图像留出适当的空间量，但它似乎不能那样工作。

我现在使用 jQuery 解决方案解决了这个问题。它要求您提供 width=和 height=为你的<img>标签。

CSS:

img { max-width: 100%; height: auto; }

HTML:

<img src="image.png" width="400" height="300" />

jQuery:

$('img').each(function() { 
    var aspect_ratio = $(this).attr('height') / $(this).attr('width') * 100;
    $(this).wrap('<div style="padding-bottom: ' + aspect_ratio + '%">');
});

这会自动应用在以下位置看到的技术:http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/