Image Resize % 不同的比例答案

【问题标题】：Image Resize % different ratiosImage Resize % 不同的比例
【发布时间】：2026-02-23 20:05:02
【问题描述】：

我正在将所有不同纵横比（一些宽，一些高等）的图像添加到页面中。

让所有图像显示或多或少相同大小但不被压扁/拉伸的最佳方法是什么？

我试过了

<img src='admin/userpics/$prodID.jpg' height='50%'>

这似乎没有使图像相同？

【问题讨论】：

你试过cssmax-width和max-height吗？

标签： php html image resize image-size

【解决方案1】：

我会使用 CSS。

img {
   max-height: 200px; 
   max-width: 200px; 
    }

【讨论】：

这会让所有图片都一样吗？
没有。这取决于它们的纵横比。如果高度 > 宽度，高度将被限制为 200，宽度将相应缩放。如果反之为真，则宽度将设置为 200，高度将缩放。因此，例如给定 2 张分别为 400 像素 x 200 像素和 200 像素 x 400 像素的图像，新尺寸将为 200 像素 x 200 像素和 100 像素 x 200 像素。

【解决方案2】：

只需将width或height设置为固定值，将另一个值设置为auto

<img src='admin/userpics/$prodID.jpg' style='width:100px;height:auto;'>

或

<img src='admin/userpics/$prodID.jpg' style='height:100px;width:auto;'>

无论你喜欢什么，纵横比总是正确的

【讨论】：

【解决方案3】：

如果你不喜欢 img 标签（像我一样），你可以使用这个（如果你不喜欢 Brad 指出的

div.image {
    background-size:cover;
    background-position:center;
    display:block;
    width:30%;
    height:30%;
}


<div class="image" style="background-image:url(admin/userpics/$prodID.jpg)"></div>

证明：http://jsbin.com/ekogaz/1/edit 看看图像如何始终保持在中心，但仍然被裁剪。您可以添加尽可能多的这些。此外，您可以使用 % （或类似 100px）。尝试调整窗口大小，您会发现它也可以正常工作。

【讨论】：

..btw，谢谢你的信息！我们在整个项目中到处都在使用 css3 和 webkit.. 让它在其他浏览器中正常运行似乎是一项艰巨的工作......
评论包括那个。
酷。和你的欢迎。对于较新的浏览器，这是一种强大的方法

【解决方案4】：

<img src='admin/userpics/$prodID.jpg' style='height: 200px; width: auto;'>

【讨论】：

【解决方案5】：

使用像素值，而不是百分比。赞this：

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

【讨论】：

【解决方案6】：

对于使用 html/css 显示调整大小的图像，您已经获得了许多有用的答案，但我建议您创建缩略图并改用它们。这样，即使您只需要小分辨率的拇指，您也将避免加载全分辨率图像，这很重要，尤其是在图像具有高分辨率或您正在构建某种画廊的情况下。您还可以控制对图像进行的下采样质量，这比某些浏览器要好得多。由于您使用 PHP，请查看此库，例如：phpThumb

您可以定义要使用的最大宽度和高度，并在保持纵横比的情况下调整图像大小。

【讨论】：

【解决方案7】：

http://jsfiddle.net/7TDCA/

HTML：

<div class="img-wrapper">
    <img src="http://i.imgur.com/Himba.png" alt="" title="" />
</div>

<div class="img-wrapper">
    <img src="http://cdn.fotocommunity.com/Natur/Tiere/Pfau-Hochformat-a18613762.jpg" alt=""     title="" />
</div>

CSS：

.img-wrapper {
    margin: 50px auto;
    width: 50%;
    height: 250px;
    overflow: hidden;
}

.img-wrapper img {
    width: 100%;
    height: auto;
}

【讨论】：