使用CSS中的百分比调整图像大小

Question

我可以帮您进行翻译。以下是需要翻译的内容：

我正在尝试使用百分比来创建一个液态网页布局，让尽可能多的元素都能够自适应。但在调整图片大小时遇到了问题。

两种情况：

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

并且

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

不适用于height属性。它们将图像宽度调整为容器的20％，但高度相对于图像大小保持不变。（我试图制作正方形）

- slexAtrukov

Answer 1

height和width属性中的百分比是针对图像所包含的容器而言的。因此，为了实现流体效果，只需在图像周围放置一个容器，并给图像设置高度和宽度：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>

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

- offhell

---

如果容器是包装器的一部分呢？ - slexAtrukov

是的，它会起作用。容器是一个<div>，可以采用任何方式进行尺寸设置：百分比或像素。 - offhell

它可以使用文件夹中的helloworld图片工作，但是无法使用数据库中的图片，仍然会生成不同的形状。你有什么想法为什么会这样？ - slexAtrukov

你能否提供从数据库获取图像的代码部分，这样我或许就能提出一个解决方案了。如果我假设你只是从数据库中获取图像路径并将其放在图像的'src'属性中，那么应该没有问题。 - Meher Ranjan

当($i < $rowNums)时{ ?> <a href="getImages.php?ImageID= <?php echo mysql_result($rslt,$i,"ImageID"); ?>" rel="lightbox[all]"><img src="getImages.php?ImageID=<?php echo mysql_result($rslt,$i,"ImageID"); ?>"/></a> <?php $i++; } - slexAtrukov

它们都没有格式，但基本上是这样的，我使用两个文件，一个用于获取所有ID，另一个用于根据发送到文件的get获取图像作为src来获取这个：<a href="getImages.php?ImageID= 4" rel="lightbox[all]"><img src="getImages.php?ImageID= 4"/></a>。 - slexAtrukov

Answer 2

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

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

- alexp

---

这是他不想让亚历克斯知道的。 - Toby Allen

哦，我以为原始图像是正方形的，但也许并非如此。 - alexp

Answer 3

你应该裁剪图片。一旦你使用了宽度或高度的百分比，我认为浏览器会尝试保持纵横比，而不考虑另一个维度的值。

- letronje

---

我尝试使用百分号来设置宽度/高度，但我的浏览器无法保持纵横比！（我正在使用Firefox 3.6）如何更改上述代码以使图像保持其纵横比？谢谢。 - hpy