使用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>

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

Answer 2

您应该裁剪图像。一旦您使用 % 表示宽度或高度，我认为浏览器会尝试保留纵横比，而不管其他尺寸的值如何。