web-dev-qa-db-ja.com

Bootstrap 3 .img応答イメージは、FireFoxのフィールドセット内で応答しません

Firefox（Win7およびWin8でテスト済み）では、以下のコードで-レスポンシブイメージが<fieldset>内にある場合、レスポンシブではなくなります。これは、フォームが電話用にサイズ変更されても、それに応じて画像が縮小されないことを意味します。

私は問題を簡単に「回避」することができますので、私はそれについて助けを必要としません。ただし、これを修正する方法を知っている場合は、大歓迎です。

以下のコードのレスポンシブ画像は、<fieldset>と<legend>を削除しない限り、FireFoxのブラウザーサイズ（少なくともWin7とWin8）に反応しません。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fieldset Responsive Image Test</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>
<body>
<div id='content' class='container'>
    <div class='row'>
        <div class='col-xs-10 col-xs-offset-1'>
            <form>
                <fieldset>
                    <legend>I Am Legend</legend>
                        <img class='img-responsive' src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" alt="img" />
                </fieldset>
            </form>
        </div>
    </div>
</div>
</body>
</html>
htmlcssimagetwitter-bootstraptwitter-bootstrap-3
43
Kevin Nelson

必要なのは、さまざまな回答で示されているように、タグに適用されるwidth:100%です。

Col-xs-12を使用：

<!-- adds float:left, which is usually not a problem -->
<img class='img-responsive col-xs-12' />

またはインラインCSS：

<img class='img-responsive' style='width:100%;' />

または、独自のCSSファイルで、.img-responsiveの追加の定義を追加します

.img-responsive { 
    width:100%;
}

問題の根本

これは、<fieldset>がオーバーフロールールを尊重しないという既知のFFバグです。

https://bugzilla.mozilla.org/show_bug.cgi?id=261037

FireFoxのバグを修正するCSS「FIX」は、<fieldset>display:table-columnを作成することです。ただし、次のリンクによると、そうすると、Operaでフィールドセットの表示が失敗します。

https://github.com/TryGhost/Ghost/issues/789

したがって、上記のソリューションの1つで説明されているように、タグを100％幅に設定するだけです。

45
Kevin Nelson

a Bootstrap issue ...

現在、回避策は次のとおりです。レスポンシブ画像に.col-xs-12を追加します。

Bootply

51
zessx

Bootstrap.css内の.img-responsiveを次のように変更します。

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

何らかの理由で、幅を100％にすると、imgに対応した作業ができます。

11
Ryan Allen

私の場合、画像がモバイルスケールでのみ反応するようにしたかったので、モバイルスケールでのみ有効なCSSスタイルの.myimgrsfixを作成しました

.myimgrsfix {
    @media(max-width:767px){
        width:100%;
    }
}

そしてそれを画像に適用しました<img class='img-responsive myimgrsfix' src='whatever.gif'>

3
Dylan Hamilton-Foster

fFではインラインスタイル、つまり.

<img src="..." class="img-responsive" style="width:100%; height:auto;" />

それは揺れます:)

2
Abdul Rahman

これはブラウザのバグのようです。

10690：テーブルセルのレスポンシブイメージ（最大幅：100％）のFirefoxのバグを報告しました。他のブラウザは影響を受けません。見る

https://bugzilla.mozilla.org/show_bug.cgi?id=975632 。

ソース

.img-responsiveの<fieldset>は同じ動作をします。

1
Foobar

レスポンシブ画像に.col-xs-12を追加するだけです。うまくいくはずです。

1
aquartier

に応答するimg-classを変更します。

.img-responsive, x:-moz-any-link {
display: block;
max-width: 100%;
width: auto;
height: auto;
1
Jonas Furlan

クラスimg-responsive bootstrap3の問題を解決するためにこのスクリプトを作成しましたが、私の場合はこれを解決しました！

$(document).ready(function() {

    if ($.browser.msie) {

        var pic_real_width, pic_real_height;

        var images = $(".img-responsive");

        images.each(function(){

            var img = $(this);
            $("<img/>")
            .attr("src", $(img).attr("src"))
            .load(function() {
                pic_real_width = this.width;  

                pic_stretch_width = $(img).width();  

                if(pic_stretch_width > pic_real_width)
                {
                    $(img).width(pic_real_width);
                }
            });         
        });
    }

});
0
Filipe - View Brasil

Abdulの回答に似ています。

<fieldset>
   <legend>Image</legend>
   <img src="..." class="img-responsive" width="100%" />
</fieldset>

FF 29、Opera 12.17、Chromium 34およびIE9で正常に動作します。はい、それは奇妙なブラウザのセットです！

0
user1973469

カスタムCSSファイルに条件のみのFirefoxを追加します。

/* only Firefox */
@-moz-document url-prefix() {
   .img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
      width: 100%;
   }
}
0
Marosdee Uma

私の問題では、コンテナほどの大きさを意図していない場合、画像を100％に拡大したくありませんでした。

私のxsコンテナ（.containerとして<768px）の場合、固定幅がないために問題が発生したため、1つ置き直しました（15pxのcol padding未満）。

// Helps bootstrap 3.0 keep images constrained to container width when width isn't set a fixed value (below 768px), while avoiding all images at 100% width.
// NOTE: proper function relies on there being no inline styling on the element being given a defined width ( '.container'  )

function setWidth() {
    width_val = $( window ).width();
    if( width_val < 768 ) {
        $( '.container' ).width( width_val - 30 );
    } else {
        $( '.container' ).removeAttr( 'style' );
    }
}

setWidth();
$( window ).resize( setWidth );
0
rambillo