2

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

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

我努力了

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

这似乎不会使图像相同？

4

7 回答 7

4

我会使用 CSS。

img {
   max-height: 200px; 
   max-width: 200px; 
    }
于 2013-08-02T14:33:11.097 回答
1

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

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

或者

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

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

于 2013-08-02T14:33:03.120 回答
1

如果你不喜欢 img 标签（就像我一样），你可以使用它（如果你不喜欢 Brad 指出的 <= IE8）：

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）。尝试调整窗口大小，您会发现它也可以正常工作。

在此处输入图像描述

于 2013-08-02T14:34:25.913 回答
0 
<img src='admin/userpics/$prodID.jpg' style='height: 200px; width: auto;'>
于 2013-08-02T14:33:01.633 回答
0

使用以像素为单位的值，而不是百分比。像这样：

<img src="smiley.gif" alt="Smiley face" height="42" width="42">
于 2013-08-02T14:34:41.797 回答
0

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

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

于 2013-08-02T14:38:03.413 回答
0

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;
}
于 2013-08-02T14:40:03.233 回答