Question

我的图像尺寸我知道。

<img class="example" src="img.jpg" width="1024" height="768" />

我希望设置宽度和高度属性，以便它可以在图像下载之前进行布局。图像可能需要一两秒才能进入，所以当它出现时，我不希望页面突然跳转。

但是，我还希望图片有width: 100%。有没有办法用CSS实现这个目标？

我试过

.example {
    width: 100%;
    height: auto;
}

但是，这忽略了我在HTML中指定的宽高比。有没有办法可以使用HTML中定义的宽度和高度属性来保持宽高比，但让图像有width: 100%（即父级的宽度）？

我不想使用JS来实现这一点，我不想在CSS中硬编码比例，而且我宁愿不做任何保证/填充黑客来实现这一目标。

修改

真的，我只是看看有没有比这更好的方法，

https://jsfiddle.net/s6gkonbh/

Answer 1

嗨，请尝试从img标签中删除高度和宽度

<img class="example" src="img.jpg" />

和css

.example {
    width: 100% !important;
    height: 100% !important;
}

Answer 2

唯一的方法是使用javascript。只需在css中设置100％的宽度，然后使用javascript获取imatge宽度乘以宽高比以获得所需的高度。

Answer 3

只提供宽度和高度到父容器分区，这将占用图像加载时图像尺寸的空间。

和将图像的宽度设置为100％，根据宽高比取高度。只需将父div的背景颜色设置为白色或与背景混合即可。

JSFiddle Demo

<强> HTML：

<div style="width:500px; height:300px; background-color:yellow">
  <img class="example" src="http://www.finnchat.com/app/uploads/2015/10/Blogi44_metakuva.jpg" width="100%" />
</div>

注意：图像版权归其各自所有者所有。

图像集HTML宽度高度属性，CSS中设置宽度100％

3 个答案: