-1

好的，对于以前玩过它的人来说，我需要的东西应该很容易，所以我们在这里：

  • 我有各种尺寸的图像
  • 图像分辨率很高
  • 我想让它们“适合”到 - 例如 150x200px - 块（特定尺寸）
  • 图像不应该：被拉伸，在图像周围留下白边（在调整大小等情况下）

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

有任何想法吗？

4

3 回答 3

1

NailThumb 是您需要的伙伴

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

快乐编码:)

于 2013-05-08T06:12:25.900 回答
0

将其显示为 abackground-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

于 2013-05-08T05:59:56.180 回答
0

只是为了好玩，因为我正在学习 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>
于 2013-05-08T08:36:09.460 回答