html - 在 css 中使用 % 调整图像大小

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>

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