如何拉伸圖像以適合網頁中的正方形？

網頁需要顯示一些圖像。而且，圖像應該顯示爲適合正方形（90 * 90像素）。不幸的是，圖像的大小是不可預知的。它們可能是80 * 100或100 * 80或90 * 110.如何拉伸圖像以適合網頁中的正方形？

要求將圖像拉伸爲：
1）如果圖像的寬度爲45，高度爲100，則將其寬度拉伸至90，將高度拉伸至200。顯示其前90個像素。
2）如果圖像的寬度爲100，高度爲45，則將其寬度擴展到200，將高度擴展到90.顯示其左側90像素。

總之，圖像的左上部分總是90 * 90的大小。

它在JavaScript和CSS中的解決方案是什麼？感謝

2011-05-14 Morgan Cheng

這會做到這一點？

<div style="width:90px;height:90px;border:1px solid #000;background-position:left top;background-image:url('myImage.jpg');background-size:100%;"></div>

例如在http://snuzzer.dk/pub/fit_image_to_div.html

UPDATE：

我已經改變了它使用JavaScript來代替。這應該解決寬度/高度的問題，沒有顯示正確使用純CSS方法。以http://snuzzer.dk/pub/fit_image_to_div.html爲例。

<script type="text/javascript"> 
function fitImage(src) { 
    var image = new Image(); 
    image.src = src; 
    var height = image.height; 
    var width = image.width; 

    if(width > height) { // Image is wider than it's high 
     scale = 90/height; 
    } 
    else { // Image is higher than it's wide 
     scale = 90/width; 
    } 

    image.width = width * scale; 
    image.height = height * scale; 

    document.getElementById('info').innerHTML = width + 'x' + height + ' => ' + image.width + 'x' + image.height; 

    document.getElementById('container').style.backgroundImage = 'url(' + image.src + ')'; 
    document.getElementById('container').style.backgroundSize = image.width + 'px ' + image.height + 'px'; 
} 
</script> 
<div style="width:90px;height:90px;border:1px solid #000;background-position:left top;" id="container"></div> 
<div id="info"></div> 
URL to an image: <input type="text" id="url" style="width:400px;" /> 
<br /> 
<input type="button" value="Fit images" onClick="fitImage(document.getElementById('url').value)" />

來源

2011-05-14 08:59:56 simonbs

這工作。謝謝 – 2011-05-14 09:03:23

– 2011-05-14 09:09:56

但是，如果原始圖像的寬度大於高度，此技巧無法正常工作。 – 2011-05-14 09:10:27

你只需把所需的寬度和高度的圖像html標記這樣

<img src="myimgae.jpg" width="90" height="90"/>

來源

2011-05-14 08:57:23

這會影響高度/寬度的比例。 – 2011-05-14 09:01:53

如果你想保持口糧只是把寬度或高度，其他值將動態獲得。 – 2011-05-14 10:51:06

如何拉伸圖像以適合網頁中的正方形？

回答

相關問題