流体图像:如何设置宽度和高度？
我正在尝试构建一个流畅的布局，为此我使用以下内容设置大图像的样式：
.fluid_img {
height: auto;
width: auto;
max-width: 100%;
}这很好用，但问题是我不能再使用html img标记中的width和height属性(它们将不起作用)。我需要这些属性，这样浏览器才能在加载图像之前“节省”图像所需的空间，这样页面的其余部分在加载图像时就不会移动。
有没有办法同时拥有这两个功能？(流媒体图像+图像加载前保存的空间)
回答 2
Stack Overflow用户
发布于 2013-04-11 03:10:34
内联样式按设计优先于样式表样式。CSS中的级联使用外部样式表(从上到下读，所以下将优先于上)、<head>中的样式(也可以从上到下)、内联样式、用户样式。有许多方法可以解决这个问题，但我不知道其中是否真的是一个好主意，因为有人问。
1)在样式表、标题或内联中设置您的固定尺寸，然后使用放置在页面下方的脚本来推翻它，以实现自动尺寸。<script>vdivid.style.width = 'auto'</script>
2)用自动标注尺寸的<div>封装固定尺寸的<img>。但这并不能真正实现您想要的效果。`
3)网络优化你的图片，这样它们就不会花很长时间来加载。
4)以像素为单位设置的尺寸通常不是在流体布局中使用的，因为它们是固定的。#fluiddiv {width:20%;height:20%;}也是如此，这就是fluid layout的工作原理。或者你可以使用em而不是%‘。em的flex基于设备的默认字体大小，而%的flex基于窗口或父元素的大小(如果它有除body或顶级包装器之外的父元素)。要获得不失真的图像，这种方式需要...我不认为你可以使用%s，所以使用em的比例与图像相同。
Stack Overflow用户
发布于 2013-05-28 02:25:37
你可以使用一个基于宽高比的百分比填充的父div，如here所述。
解决方案是丑陋的，我很惊讶，尽管流畅的图像真的很老了，但关于这个问题或优雅的解决方案却没有太多的讨论。
https://stackoverflow.com/questions/7055637
复制相似问题
腾讯云开发者
