Question

好吧，对于之前曾经玩过的人来说，我需要的东西应该非常简单，所以我们在这里：

我有各种尺寸的图像
图像分辨率高
我想让它们“适应” - 例如150x200px - 块（具体尺寸）
图像应不：拉伸，在图像周围留下白边（如果调整大小等）

所以，基本上，我正在寻找一个插件（最好是jquery）来自动调整图像大小（基于某些class？）并做到这一点。

有什么想法吗？

Answer 1

NailThumb是你需要的伙伴

http://www.garralab.com/nailthumb.php

快乐编码：）

Answer 2

将其显示为background-image并将其包含在CSS样式表中：

 background-size: contain;

https://developer.mozilla.org/en-US/docs/CSS/Scaling_background_images

虽然它是CSS3，但我会选择它。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 3

只是为了好玩，因为我正在学习JS，我想我会看看是否可以为此编写一些代码。无论div的大小如何，它似乎都有效。不知道JS是多么好，但我想我无论如何都会发布它：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

div {width: 200px; height: 150px; overflow: hidden;}
img {width: 100%;}
</style>

</head>
<body>

<div><img src="test.png" alt=""></div>

<script>
var imgs = document.getElementsByTagName("img");
for (i=0; i<imgs.length; i++) 
{
    var img = imgs[i];
    img.style.width = "auto";
    var p = img.parentNode;
    var h = p.clientHeight;
    var w = p.clientWidth;

    if (img.style.height < h) {
        img.style.height = h + "px";
        img.style.width = ((img.style.width / img.style.height) * h) + "px";
    }
}
</script>
</body>
</html>

使图像适合特定尺寸

3 个答案: