以标准尺寸渲染图像而不拉伸，最小尺寸答案

【问题标题】：Render images at a standard size without stretching, with a minimum size以标准尺寸渲染图像而不拉伸，最小尺寸
【发布时间】：2011-11-10 04:20:44
【问题描述】：

我需要在每个精确 101x155 的网格中呈现个人资料图像。

有些图片太小，有些太大，大多数的宽高比都不合适。

如何以最小的宽度和高度显示img，不失真，并显示我想要的确切尺寸？

【问题讨论】：

这些会不会是 php 页面？
101 张图片 x 155 张图片？还是 101x155 像素大的图像？原件与原件有多大你想把它们塞进那个盒子里？
你最好在服务器上调整它们的大小而不是在客户端上。质量会好很多。

标签： javascript jquery html image-processing

【解决方案1】：

在不实际修改图像的情况下，您可以使用一些选项。

img { max-width: 101px max-height: 155px }

这将确保图片的宽度不会超过 101x155 像素。因为它们不是完美的纵横比，所以如果纵横比不完美，图像的两侧仍然会有空白。

另一种方法是将它们装入容器中

<div><img .../></div>
div {width: 101px; height: 155px; overflow: hidden}
img {width: 101px;} /*or do height: 155px)*/

这并不完美，但它会给您带来不同的结果。这将要求所有图像的图像更高或更宽。

最好的方法是调整大小，但我知道我们不能总是按自己的方式行事 :)

【讨论】：

如果你的图片被css歪斜了，试着添加一个宽度：auto;或 height: auto 为您未设置的值（即： max-width: 101px; height: auto; ）。

【解决方案2】：

一些 jQuery 怎么样？如果您只是将<img> 包含在class="grid-img" 中：

$(".grid-img").each(function(i){
   var width = $(this).width();
   var height = $(this).height();
   var ar = height/width;
   if(width > 101) {
      var newWidth = 101;
      var newHeight = 101 * ar;
   } else {
      var newHeight = 155;
      var newWidth = ar / newHeight;
   }
   $(this).height(newHeight);
   $(this).width(newWidth);
});

这应该做的是：如果图像的宽度太大，根据宽度调整它的大小（保持纵横比）。如果没有，请根据高度调整它的大小（再次保持 AR）。

【讨论】：