0

Bootstrap 3.3.5 で構築した私の Web サイトには、レスポンシブにしたい画像が含まれているため、それらに .img-responsive クラスを割り当てました。ただし、Firefox では応答しません (ウィンドウのサイズを小さくしても、画像が小さくならないため、スクロール バーが表示されます)。Internet Explorer では問題なく動作します。「幅：100％;」を追加することで修正できるバグについて読んだ他のブラウザは試していません。しかし、それで問題は解決しません（ウィンドウを小さくすると、画像が大きくなり、それを含む列がその行の唯一の列になるだけです。作成を続けると、再び小さくなりますウィンドウは小さくなりましたが、画面を大きくしたいサイズになると、再びスクロールバーが表示されます.htmlタグに「width: 100%;」をインラインで追加してみました. CSSに追加してみました。「display:block;」も追加してみました "最大幅: 100%;" および「高さ: 自動;」も同様ですが、それは何も変わりませんでした。!important を追加しても役に立ちませんでした。他に何を試せばいいのかわからない！

画像のコードは次のとおりです（行のこの列のみ）：

<div class="col-sm-4 nopadding">                           
   <a href="index.html"><img src="images/logo6.png" class="img-responsive logoplacement center-block" alt="Logo"></a>
</div>

そしてCSS：

.logoplacement {
padding-bottom: 20px;
padding-top: 20px;
padding-left: 35px;
vertical-align: middle; 
}    

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

私に何ができる？

アップデート：

メディアクエリ:

@media (max-width: 780px) {
 .logoplacement img{
  max-width:80% !important;
  }
}
4

1 に答える 1

1

Firefox で画像をレスポンシブにするには、表示ブロック プロパティを削除するだけです

画像が実際の幅を超えないようにするには、100% 幅のプロパティを削除し、最大幅のプロパティを保持します。画像を実際のサイズまで拡大しますが、それ以上にはなりません。

画像を小さくする (自動的に取得されるよりもさらに小さくする) には、次の CSS をメディア クエリ内に配置します。

img {
  max-width: 80%;
}

メディア クエリを次のように更新します。

@media (max-width: 780px) {
  .logoplacement {
    max-width: 80% !important;
  }
}

あなたの img には logoplacement クラスがあり、CSS を適用する方法は、logoplacement と呼ばれる親クラスがあり、img がその中にあるようです。これは正しくありませんでした

于 2016-03-16T20:21:59.840 に答える