图像调整％不同比率

Question

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

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

我试过了

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

这似乎不能使图像相同？

Answer 1

我会使用CSS。

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

Answer 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;'>

你喜欢什么，长宽比总是正确的

Answer 3

如果你不喜欢img标签（就像我一样），你可以使用它（如果你不会像布拉德指出的那样以

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

Answer 4

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

Answer 5

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

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

Answer 6

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

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

Answer 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;
}