2

テーブル内の 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フィドルの例。
Chrome では両方の画像が div-wrapper に比例してスケーリングされますが、Firefox と IE9 の画像はスケーリングされません。

どこでもChromeの動作を取得するにはどうすればよいですか?

回答:唯一の解決策は、javascript を使用することです。私のクロスブラウザ ソリューションは次のとおりです。http://jsfiddle.net/TAE3w/21/

4

3 に答える 3

3

幅も 100% に設定するだけです。

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

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

3 つのブラウザーすべてで最も一貫した効果は次のとおりです。

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

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

関連する質問を参照してください:

于 2013-03-01T08:44:52.287 に答える
1

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 関数を使用してください。

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 );

もちろん、Web サイトの特定のセクションから画像のみを選択したり、クラス名やその他の属性でフィルター処理したりすることもできます。

于 2014-01-21T19:14:34.470 に答える
0

記録のために、最近Chromeに上陸したテーブルでの最大幅のサポート。

修正が Webkit に適用されたのか、Chrome の Blink エンジンだけに適用されたのかはわかりません。この問題は依然として Safari 6 に影響します。

于 2013-08-25T23:04:52.753 に答える