ブートストラップグリッドで画像がオーバーフローするのを防ぐ

Question

html5とcss3にジャンプして初めてブートストラップを使用する（残念ながら、ブートストラップ4や他のバージョンを使用しているかどうかは不明です）。

私のサイトにフッターを作成するには、小さな画面に合わせて調整できるグリッドを使用します。フッターは3列のみのグリッドで構成されています（基本的にフッターを3等分します） 画面/フッターの幅が850px以下になると、最初の列に問題があります。 最初の列には現在3つのイメージがあり、すべてのロゴが表示されます。画面の幅が850ピクセルを超えて縮小すると、列がオーバーフローします。最初の2枚の画像は見えますが、3枚目（そして最も広い）はオーバーフローし、最初の2枚の画像よりも下になり、もはや見えなくなります。すべての画像は同じ高さです。

私はこれが起こりたくありません。私は、ユーザーの画面の幅に基づいてイメージのサイズを調整する方法を見つけようとしています。これらの3つの画像を画面サイズに合わせることができれば、幅が狭くなるほど画像も小さくなるので理想的です。 この状況で私を助けるクラス、属性、セレクタがあるかどうかを確認しようとしています。それ以外の場合は、画面がある幅に達したときにグリッドフォーマットを使用しないようにフッタを再フォーマットし、イメージを互いに並べる必要があると想像しています。

ありがとうございます。

編集：3つの画像を含むグリッド列は、このようになります。私は、特にイメージの高さを変える以外はスタイリングがあまりないので、CSSをここに入れる価値はないと思います。

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-3"> 
    <p class="text-center"> 
     <a href="http://dcc.dickinson.edu"><img id="DCC-logo" class="img-fluid" src="/static/images/DCC-logo.png"></img></a> 
     <a href="http://www.cipl.ulg.ac.be/Lasla/"><img id="LASLA-logo" class="img-fluid" src="/static/images/LASLA-logo.png"></img></a> 
     <a href="http://tdh.brynmawr.edu/"><img id="TriCoDH-logo" class="img-fluid" src="/static/images/TriCoDH-logo.png"></img></a> 
    </p> 
</div> 

Answer 1

なぜドンすべての3つのイメージが行内に折り返されるように、3列目のcol-xs-4 col-sm-4 col-md-4 col-lg-3の画像用に別のグリッド構造を作成し、すべてimgタグにimg-responsiveクラスを追加しますそれらは応答します。

@media (max-width:767px){ 
 
    .p5.col-xs-4{ 
 
    padding: 0 5px; 
 
    } 
 
    .m5.row{ 
 
    margin: 0 -5px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-3"> 
 
    <div class="row text-center m5"> 
 
    <div class="col-xs-4 p5"> 
 
     <a href="http://dcc.dickinson.edu"><img id="DCC-logo" class="img-responsive" src="http://placehold.it/150x150"></a></div> 
 
     <div class="col-xs-4 p5"> 
 
     <a href="http://www.cipl.ulg.ac.be/Lasla/"><img id="LASLA-logo" class="img-responsive" src="http://placehold.it/150x150"></a></div> 
 
     <div class="col-xs-4 p5"> 
 
     <a href="http://tdh.brynmawr.edu/"><img id="TriCoDH-logo" class="img-responsive" src="http://placehold.it/150x150"></a></div> 
 
    </div> 
 
</div>

Answer 2

あなたは

<div class="row"> 
    <div class="col-xs-12 col-md-4"> 
     <img src="..."/> 
    </div> 
    <div class="col-xs-12 col-md-4"> 
     <img src="..."/> 
    </div> 
    <div class="col-xs-12 col-md-4"> 
     <img src="..."/> 
    </div> 
</div> 

のようなマークアップを持っている場合のように、画像のスタイルを設定することができますので、あなたが使用している列の画像全幅を行います

.row .col-md-4 img { 
    max-width: 100%; 
    width: 100%; 
}