Q

使圖像適合特定尺寸

2013-05-08 132 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

相關問題