Question

我需要在每个格式为101x155的网格中渲染轮廓图像。

有些图像太小，有些图像太大，大多数图像不是正确的宽高比。

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

Answer 1

如果没有实际修改图像，您可以选择一些选项。

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

这将确保图像不会超过101x155px宽。因为它们不是完美的宽高比，如果宽高比不完美，图像的两侧仍然会有空白。

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

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

这不完美，但它会给你一个不同的结果。这将要求所有图像的图像更高或更宽。

最好的方法是调整大小，但我知道我们不能总是这样做：）

Answer 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）。

以标准尺寸渲染图像，无需拉伸，尺寸最小

2 个答案: