最大寬度在表

我有與表中的IMG顯示一個問題：最大寬度在表

<table> 
<tr> 
<td> 
    <div>  
     <img src="https://www.google.ru/images/srpr/logo4w.png"/> 
     <img src="http://pictar.ru/data/media/24/nature__463_.jpg"/> 
    </div> 
    </td> 
</tr> 
</table>

利用CSS：

div { 
    height: 100%; 
    width: 100%; 
    border:2px solid red; 
} 
div img { 
    max-width: 100%; 
    max-height: 100%; 
}

JS Fiddle example。
在Chrome中，這兩個圖像按比例縮放到div封裝，但在Firefox和IE9圖像中不能縮放。

我該如何在任何地方獲得Chrome的行爲？

答案：唯一的解決辦法就是使用javascript。我的跨瀏覽器解決方案是：http://jsfiddle.net/TAE3w/21/

來源

2013-03-01 SerCe

您只需將寬度也設置爲100％即可。

div img { 
    width: 100%; 
    max-width: 100%; 
    max-height: 100%; 
}

http://jsfiddle.net/samliew/TAE3w/9/

在所有三個瀏覽器最一致的效果是：

div img { 
    display: block; 
    width: 100%; 
    height: auto; 
    max-width: 100%; 
    max-height: 100%; 
}

http://jsfiddle.net/samliew/TAE3w/15/

查看相關問題：

來源

2013-03-01 08:44:52

但是在這種情況下，Google圖像的縮放比實際更大 – SerCe 2013-03-01 08:50:40

這很有趣，但我的問題是使所有三個瀏覽器的行爲與Chrome中的第一個示例相同，我的問題特別描述[stackoverflow] （http://stackoverflow.com/questions/2923710/why-do-firefox-and-opera-ignore-max-width-inside-of-display-table-cell），但解決方案不適合我 – SerCe 2013-03-01 09:07:26

你會那麼必須使用一些JavaScript。 – 2013-03-01 10:04:06

爲了記錄在案，爲最大寬度支撐在桌子上近日登陸瀏覽器。

我不確定修補程序是否應用於Webkit，或僅適用於Chrome的Blink引擎。該問題仍然會影響Safari 6.

來源

2013-08-25 23:04:52 Wolverine

在Firefox中，如果指定百分比，max-width不起作用，但如果給定確切值，則最大寬度不起作用。使用javascript將maxWidth設置爲圖像寬度。不需要包裝。

<img onload="this.style.maxWidth=(this.getAttribute('width')?this.getAttribute('width'):this.naturalWidth).toString() + 'px'; this.style.width='100%'; this.style.height='auto';" src="yourimage.jpg" />

如果您不想更改圖片標籤，請在所有圖片上使用javascript funtction。

function makeImagesResponsive(){ 
    var images = document.getElementsByTagName('img'); 
    for(var i = 0; i < images.length; ++i) { 
     images[i].style.maxWidth=(images[i].getAttribute('width')?images[i].getAttribute('width'):images[i].naturalWidth).toString() + 'px'; 
     images[i].style.width='100%'; 
     images[i].style.height='auto'; 
    } 
} 
window.addEventListener("load", makeImagesResponsive, false);

當然，你可以從你的網站的特定部分只選擇圖片，或者通過類名或其他屬性進行篩選。

來源

2014-01-21 19:14:34 Sorin

最大寬度在表

回答

相關問題