CSS - 防止圖像放大？

在我的CSS，我目前使用這樣的：CSS - 防止圖像放大？

img.info { 
    max-width: 620px; 
    max-height: 800px; 
}

不幸的是，當我的形象小於max-width和max-height，它就會被放大的。我認爲標準的行爲是不會發生縮放的，但顯然情況並非如此。有什麼辦法可以防止圖像變大嗎？

編輯：我發現問題的根源，它在於我的程序完全不同的部分。我上面發佈的代碼工作得很好。對不起這篇不必要的文章！

來源

2010-08-29 ryyst

你能提供的信息：（a）這是什麼瀏覽器？（b）原始圖像大小是多少，以及顯示的是什麼（放大）圖像大小？（正如Timwi所說，你可以使用Firebug做到這一點） – syockit 2010-08-29 12:48:45

嗯，或許你可以刪除它，如果你認爲它沒有教育意義？ – syockit 2010-08-29 14:02:22

它工作得很好，用下面的極簡例如：

<style> 
    img.a { 
     max-width: 640px; 
     max-height: 640px; 
    } 
</style> 

<img src="(my local image file)" class="a">

圖像不會被放大。當然，如果我也添加width和height屬性。因此，請檢查是否有任何可能適用於您的圖像的其他CSS屬性。您可以使用Firebug來確定哪些CSS屬性適用於您的圖像。

來源

2010-08-29 12:23:11 Timwi

我喜歡用蜻蜓。 http://www.opera.com/dragonfly/ – 2010-08-29 12:28:09

我想我知道你的意思。我假設你有一個給定的空間，並且想用圖片填充它。圖片不應該被擠壓或拉伸，但空間應該填充？

那麼這可能是您的解決方案的第一部分：

div.info { 
    width: 620px; 
    height: 640px; 
    overflow: hidden; 
} 
 
<div class="info"><img class="info" src="http://www.sjphoto.com/hk-web/images/HK-skyscraper.jpg" width=640 /> </div>

你現在能做的就是一個onload事件處理程序添加到您傳遞所需的高度，然後縮放你的形象和內部定位它的圖像div，所以它被平均裁剪。這可能看起來像這樣（未經測試）：

function scaleUp(el,height) { 
    if(el.height < height) { 
     var oldwidth = el.width; 
     el.deleteAttribute('width'); 
     el.height=height; 
     el.style.marginLeft=((oldwidth-el.width)/2)+'px'; 
    } else if(el.height > height) { 
     el.style.marginTop = '-'+((el.height-height)/2)+'px'; 
    } 
}

來源

2010-08-29 12:51:50

CSS - 防止圖像放大？

回答

相關問題