使用css中的％调整图像大小 [英] resize images using % in css

问题描述

我试图创建一个液体网页布局使用％尽可能多的东西，我可以。

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.

两者：

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

和

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

无法与height attrib它们将图像宽度调整为容器的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)

推荐答案

图片的 height 和属性中的百分比与其所包含的容器搭配使用。因此，实现流体效果只是试图把一个容器围绕img，并给出图像的高度和宽度： 100％。现在你应该以百分比来改变容器的高度和宽度。这是一个例子

The percentages in height and width attributes 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 example

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

这样，您的图片将达到500 * 100的高度和宽度。

With this your image will achieve a height and width of 500 * 100.

UPDATE

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

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

Example with a wrapper and the container with the percentages.

这篇关于使用css中的％调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！