我正在尝试构建一个流畅的布局,为此我正在为大图像设计样式:
.fluid_img {
height: auto;
width: auto;
max-width: 100%;
}
这很好用,问题是我不能再在 html img 标签中使用 width 和 height 属性(它们将不起作用)。我需要这些属性,以便浏览器可以在图像加载之前“保存”图像所需的空间,这样页面的其余部分就不会在图像加载时移动。
有没有什么办法可以同时拥有这两个功能? (流体图像 + 图像加载前节省的空间)
最佳答案
我也在寻找这个问题的答案。与 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/
关于html - 流体图像 : How to set width and height?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7055637/