Q

使图像适合特定尺寸

2013-05-08 123 views -1 likes

-1

OK，我需要的应该是很容易的人已经前打了这一点，所以我们在这里：使图像适合特定尺寸

我有不同的尺寸
的图像分辨率的图像是高
我想让他们“适合” - 例如150x200px - 块（的具体尺寸）
图像应当不：被拉伸，留下白色边缘图像周围（如果调整大小等）

所以，基本上，我正在寻找一个插件（最好jQuery），自动调整图像大小（基于一些class？），并伎俩。

任何想法？

2013-05-08 Dr.Kameleon

+0

NailThumb是你所需要的，通过'http：// www.garralab.com/nailthumb.php' – dreamweiver 2013-05-08 05:57:53

+0

@dreamweiver没错， NailThumb **是**我需要的。正是我想要的，伙计！非常感谢！ :-)（请将帖子作为答案，我会接受;-)）。 – 2013-05-08 06:09:33

+0

您的欢迎伙伴，请通过检查下面的正确答案来解决此问题。 – dreamweiver 2013-05-08 06:13:28

A

回答

1

NailThumb是你需要什么哥们

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

编码快乐:)

2013-05-08 06:12:25 dreamweiver

+0

再次感谢，我的朋友！ :-) – 2013-05-08 06:14:42

0

显示它作为一个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

2013-05-08 05:59:56

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-08 08:36:09

相关问题