如何調整bbcode鏈接的圖像以修復當前div的高度和寬度？

您好我有一個評論發佈功能，其中公共用戶可以連接並使用如何調整bbcode鏈接的圖像以修復當前div的高度和寬度？

喜歡的東西[IMG] http://www.google.com/img.png [/ IMG]

問題是顯示圖像該用戶可能會鏈接到一個高度和寬度都非常大的圖像，這個圖像比div的高度和寬度還要大，導致一些溢出佈局問題

是否有反正我可以調整圖像大小適合div而不會損失寬高比？

或者我可以使用像set overflow這樣的CSS來顯示滾動條，如果發生這種情況？

2012-02-10 Sillicon.Dragons

您應該可以通過CSS將max-width和max-height應用於img。

#my_selector img 
{ 
    max-width: 200px; 
    max-height: 200px; 
}

來源

2012-02-10 00:56:18 Joe

這是最好的解決方案，只要父元素的尺寸是已知的。 – alex 2012-02-10 00:59:45

但是，如果圖像的高度和寬度是320 x 260，那麼圖像會變形？因爲它變成200 x 200 – 2012-02-10 01:18:11

可以遍歷圖像，並確保其尺寸並不比他們的父元素高...

var imgs = document.getElementById('container').getElementsByTagName('img'), 
    parent, 
    parentWidth, 
    parentHeight; 

for (var i = 0, length = imgs.length; i < length; i++) { 
    parent = imgs[i].parentNode 
    parentWidth = parent.offsetWidth; 
    parentHeight = parent.offsetHeight; 

    if (imgs[i].width > parentWidth) { 
     imgs[i].style.width = parentWidth + 'px'; 
     imgs[i].style.height = 'auto'; 
    } else (imgs[i].height > parentHeight) { 
     imgs[i].style.height = parentHeight + 'px'; 
     imgs[i].style.width = 'auto'; 
    } 

}

來源

2012-02-10 00:59:17 alex

如何調整bbcode鏈接的圖像以修復當前div的高度和寬度？

回答

相關問題