ブートストラップ4 - ウィンドウのサイズを変更すると、画像がカラムからオーバーフローします

Question

ブートストラップ初心者はここにあります。

古いページをブートストラップしようとしていますが、イメージが次のカラムにオーバーフローするのを防ぐ方法がわかりません。私は2列の列を持っています。左側には写真が入っています。ウィンドウの幅を小さくすると、イメージは右の列にオーバーフローし始め、最終的に右の列の上に崩壊します。イメージが左の列に収まらなくなるまで、左の列の幅を静的にしたり、右の列の上端に崩壊させたりしてください。

イメージにイメージレスポンスクラスを追加しようとしましたが、イメージのサイズが変更されるだけで、イメージのサイズを維持することをお勧めします。どんな助けでも大歓迎です！ここで

は私のコードです：https://www.codeply.com/go/fb14u8fsSc

Answer 1

は、それはあなた以下の1が探しているようなものですか？

ノートのカップルかかわら：

• …X…の等価である、それはので、あなたの簡素化codeply例があるかもしれないが、あなたは<div class="row"><div class="col-md-12">…X…</div></div>を使用しています。それは物事を単純化する。
• 私たちは（あなたもあなたのcodeplyでいることを使用）ここでブートストラップ4の話が、.img-responsiveクラスされているclassは、インラインスタイルのマージンに関してはブートストラップ4.
• で.img-fluid呼び出されることをブートストラップ3からですが、私はお勧めします代わりにspacing utility classesを使用してください。

<div class="container-fluid" style="position: fixed"> 
 
    <div class="row"> 
 
     <div class="col"> 
 
      <div class="card my-3"> 
 
       <div class="card-header"></div> 
 
       
 
       <div class="card-body"> 
 
        Insert name here<br/> 
 
        <img src="https://dummyimage.com/188x225/000/fff" class="XXXimg-fluid" alt=""/> 
 
       </div> 
 

 
       <div class="card-footer"></div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-9"> 
 
      <div class="card text-xs-center mt-3"> 
 
       <div class="card-header"></div> 
 
       <div class="card-body"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>