在 css 中使用 % 调整图像大小
我正在尝试使用 % 为尽可能多的东西创建一个液体网页布局。我在调整图像大小时遇到了障碍。
两者：
<img src="source" style="width: 20%; height: 20%;"/>
并且
.wall_picture_block img{
width: 20%;
height: 20%;
}
不能与高度属性正常工作。他们将图像宽度调整为容器的 20%，但高度保持相对于图像大小。（我试图制作正方形）
I am trying to create a liquid web layout using % for as many things as i can. I have hit a bump when resizing images.
both:
<img src="source" style="width: 20%; height: 20%;"/>
and
.wall_picture_block img{
width: 20%;
height: 20%;
}
don't work properly with the height attribte. They resize the image width to 20% of the container but the height stays relative to the image size.(im trying to make squares)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
图像的
height和width属性中的百分比与其所包含的容器一起工作。因此，要实现流体效果，只需尝试在 img 周围放置一个容器并给出图像高度和宽度：100%。现在您应该以百分比形式更改容器的高度和宽度。这是一个示例，使用此示例，您的图像将达到 500 * 100 的高度和宽度。
更新
带有包装器和带有百分比的容器的示例。
The percentages in
heightandwidthattributes of an image works with the container it is contained in. So to achieve the fluid effect just trying putting in a container around the img and give image height and width:100%. and now you should be changing the height and width of the container in percentages. Here's an exampleWith this your image will achieve a height and width of 500 * 100.
UPDATE
Example with a wrapper and the container with the percentages.
您应该裁剪图像。一旦您使用 % 表示宽度或高度，我认为浏览器会尝试保留纵横比，而不管其他尺寸的值如何。
You should crop the image. Once you use a % for width or height, I think the browser tries to preserve the aspect ratio, regardless of the value for the other dimension.
如果您希望图像的宽度为其容器的百分比，并且为了使图像保持其原始宽高比，请以百分比形式定义宽度并将高度设置为自动：
If you want the image's width to be a percentage of its container, and for the image to maintain its original aspect ratio, define the width in percentage and set the height to auto: