以最小尺寸呈现标准尺寸的图像
问题描述:
答
没有实际修改图像,你有几个选项可供你使用。
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)*/
这不是完美的,但它给你一个不同的结果。这将要求所有图像的图像要么更高,要么更宽。
最好的办法是调整,但我知道,我们不能总是有我们的方式:)
+0
如果你的图像被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)。
这些恰好是php页面吗? –
101图片x 155图片?或101x155像素大的图像?原件与原件有多大?你想把它们塞进盒子里? –
你最好在服务器上调整它们的大小,而不是在客户端上。质量会更好。 –