6 
img {
    max-width: 100% !important; /* Set a maxium relative to the parent */
    width: auto\9 !important; /* IE7-8 need help adjusting responsive images */
    height: auto; /* Scale the height according to the width, otherwise you get stretching */
    vertical-align: middle;
    border: 0;
    display: block;
    -ms-interpolation-mode: bicubic;
}

上記の CSS は、レスポンシブ イメージを可能にするTwitter Bootstrapから取得されます。唯一の問題は、これが Firefox と IE では効果がないことです。

次の場合:

<div class="row-fluid">
    <div id="logo" class="span4">
        <a href="<?= home_url( '/' ) ?>"><img src="<?= get_template_directory_uri() ?>/assets/images/logo.png" /></a>
    </div>
</div>

http://dev.netcoding.net/lowsglass/about-us/ - 問題を示すページです。

Firefox または IE で、ページを 432px 未満に縮小すると、画像が max-width に従わなくなることがわかります (764px を超えると、従います)。

Firefox や IE でレスポンシブ イメージを動作させるには、イメージ コンテナーを使用せずにこれを修正するにはどうすればよいですか?

4

7 に答える 7

13

私は Firefox / IE と max-width、特に display: inline-block の要素で多くの苦労をしました。以下の CSS のみのソリューションを使用して、修正を追加します。

// Styles for Firefox
@-moz-document url-prefix() {
    #logo img {
        width: 100%;
    }
}

// Styles for IE10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #logo img {
        width: 100%;
    }
}
于 2013-11-06T12:35:03.337 に答える
5

が定義されていないmax-width/height場合、Firefox は画像のスケーリングに失敗します。width/heightしたがって、2 つの方法があります。

1. 幅と最大幅を設定します。 

width: 100%;
max-width: 100%;

2.max-widthと を とmax-heightで使用vwしvhます。

max-width: 90vw;

つまり、画像は表示幅の最大 90% になります。楽しむ！

于 2015-11-02T09:41:05.653 に答える
0

Bootstrap フレームワークとデバッグ用の Chrome のみを使用して大量のサイト デザインを実装した後、同様の問題にぶつかりました... Biiig の間違い © :) すべての画像はサイズ変更されておらず、元の幅でしたが、予想よりもはるかに広い場合がありました...

div の 2 つの列を持つ同様の場所がたくさんありました。左の列には span6、右の列には span6 です (これらは流動的な Bootstrap グリッドのスタイルです)。これらのコラムでは、画像がテキスト行の間に配置されることがありました。ご覧のとおり、画像は IE\Mozilla で適切にサイズ変更されず、すべてのクールなデザインがまったく適切ではなくなりました :(

グーグルで調べ、github からいくつかのアドバイスを試した後、jQuery を使用することにしました :) 列コンテナーにクラスを追加し (fluid span12 行の imageContainer)、適切にサイズ変更する必要がある画像にクラス 50perc を追加しました (各画像のサイズはコンテナーのサイズの 50%)。コードは次のとおりです。

$(function(){
    var cont = $('.imageContainer');
    $('.50perc').each(function(i, el){
    $(el).width(cont.width() / 2);
});

ps 実際には、この関数を window.resize イベント ハンドラで使用すると非常に効果的です :)

于 2013-07-20T15:06:47.920 に答える
0

Firefox、IE、Chrome のレスポンシブ イメージ。Firefox で動作するシンプルなソリューション

<div class="article"><img></div>

.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}
于 2015-06-11T08:27:16.713 に答える
0

実際、影響を受けるのは img タグではなく、span* コンテナーです。Bootstrap Responsive が特定のポイントに達すると、フローティングがオフになり、幅が 100% に設定されます。そのコンテナーが 100% に戻ると、その中の子 (img タグ) は、100% の最大幅に展開するように指示したことを正確に実行します。

Respond.css からこれを見てください... スタイルシートの宣言の上に、次のように表示されます。

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    margin-left: 0;
    width: 100%;
}

これが img の「サイズ変更」の原因です...Bootstrap のレスポンシブ スタイルの設定方法により、コンテナが特定のポイントを超えて縮小しなくなりました。

これをブロックするには、Bootstrap スタイルシートを変更するか (この場合、Bootstrap ファイルを更新するたびに変更をやり直す必要があります)、または独自のスタイルシートで次のようなことを行うことができます。

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: inline-block;
    float: left;
}

これにより、フローティングが元に戻りますが、その画面幅でのデフォルトの Bootstrap スタイルは幅を 100% に設定しようとしているため、依然として幅の問題が残ります。設定width:autoを試して、特定のスパンステップ (.span1、.span2 など) ごとに幅を引き継ぐことができることを願っていますが、実際にテストして、何が最適に機能するかを確認する必要があります。あなたの状況のた​​めに。

于 2013-06-05T20:10:50.333 に答える