以最小尺寸呈现标准尺寸的图像

我需要在每个101x155的网格中呈现配置文件图像。以最小尺寸呈现标准尺寸的图像

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

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

来源

2011-11-09 Wesley

这些恰好是php页面吗？ –

101图片x 155图片？或101x155像素大的图像？原件与原件有多大？你想把它们塞进盒子里？ –

你最好在服务器上调整它们的大小，而不是在客户端上。质量会更好。 –

没有实际修改图像，你有几个选项可供你使用。

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)*/

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

最好的办法是调整，但我知道，我们不能总是有我们的方式:)

来源

2011-11-09 20:09:42

如果你的图像被css倾斜，尝试添加一个宽度：auto;或height：auto为你未设置的值（即：max-width：101px; height：自动;）。 –

怎么样的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）。

来源

2011-11-09 20:20:44 interphase27

以最小尺寸呈现标准尺寸的图像

回答

相关问题