Question

我正在努力创建一个使用％的液体网页布局尽可能多的东西。调整图像大小时，我遇到了碰撞。

两个

<img src="source" style="width: 20%; height: 20%;"/>

和

.wall_picture_block img{
width: 20%; 
height: 20%;
}

与高度属性无法正常工作。他们将图像宽度调整为容器的20％，但高度保持相对于图像大小。（我试图制作正方形）

Answer 1

图像的height和width属性中的百分比与其所包含的容器一起使用。因此，为了实现流体效果，只需尝试放入img周围的容器并提供图像高度和宽度：100%。现在你应该以百分比的形式改变容器的高度和宽度。这是一个例子

<div style="width: 500px; height: 100px;">
   <img src="your-image-link-here" style="height: 100%; width: 100%;">
</div>

这样你的图像将达到500 * 100的高度和宽度。

更新

<div id="wrapper" style="border: 1px solid red; width: 900px; height: 400px;">
  <div id="imgcontainer" style="width: 100%; height: 50%;">
     <img src="ur-img" style="height: 100%; width: 100%;">
  </div>
</div>

包装器和具有百分比的容器的示例。

Answer 2

您应裁剪图像。一旦你使用％作为宽度或高度，我认为浏览器会尝试保留纵横比，而不管其他维度的值。

Answer 3

如果您希望图像的宽度为其容器的百分比，并且图像保持其原始高宽比，请以百分比定义宽度并将高度设置为自动：

.wall_picture_block img{
    width: 20%; 
    height: auto;
}

使用css中的％调整图像大小

3 个答案: