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

Posted 2023-03-05

【中文标题】在 css 中使用 % 调整图像大小

【英文标题】：resize images using % in css

【发布时间】：2011-04-17 09:05:22

【问题描述】：

我正在尝试使用 % 尽可能多地创建一个液体网页布局。我在调整图像大小时遇到​​了问题。

两者：

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

和

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

高度属性不能正常工作。他们将图像宽度调整为容器的 20%，但高度保持相对于图像大小。（我试图制作正方形）

【参考方案1】：

图像的height 和width 属性中的百分比适用于它所在的容器。因此，要实现流畅的效果，只需尝试在 img 周围放置一个容器并给出图像的高度和宽度：@987654323 @。现在您应该以百分比更改容器的高度和宽度。这是一个例子

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

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

【讨论】：

如果容器是包装器的 % 怎么办？

是的，它会起作用的。容器是一个 并且采用任何方式的尺寸：%ages 或像素。

它适用于 helloworld 文件夹中的图像，但不适用于 db 中的图像，它仍然使它们具有不同的形状。知道为什么吗？

你能把从数据库中获取图像的部分代码贴出来，然后我可能会提出一个解决方案。如果我假设您只是从数据库中获取图像路径并将其放在图像的 'src' 属性中，那么应该没有问题。

while($i " rel="lightbox[all]">"/> php $ i++;

【参考方案2】：

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

【讨论】：

我尝试使用 % 作为宽度/高度，但我的浏览器不保留纵横比！ （我使用的是 Firefox 3.6）如何更改上述代码以使图像保持其纵横比？谢谢。

【参考方案3】：

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

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

【讨论】：

这是他不想要的Alex。

哦，我以为原始图像是正方形的，但可能不是这样。