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

我有一张我知道大小的图像。图像集宽度HTML中的高度属性，CSS中的设置宽度100％

<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/

来源

2016-06-08 Jacob Parker

你不能设置从CSS的宽度和高度。你需要将它设置为内联。 –

您可以设置100％的img宽度，但您实际需要的位置。你想自动设置其宽度和高度的一些div或在视口，在哪里？我没有得到。 – frnt

如果您事先知道图像的比例，则可以使用填充底部黑客。 –

你好，请试试这个从IMG标记删除高度和宽度

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

和CSS

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

来源

2016-06-08 08:51:03

这会将高度设置为父级的100％。 –

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

来源

2016-06-08 08:51:59

只是提供宽度和高度的父容器部门将占用图像的尺寸空间，而图像将加载。

和将图像的宽度设置为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>

注：图片版权均为其各自所有者。

来源

2016-06-08 09:00:45 Himanshu

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

回答

相关问题