CSSの列内容を整列する方法

Question

次のHTMLコードでは、2つの列を持つ行を作成しました。最初の列にはイメージがあり、2番目には見出しと段落があります。

<div class="row"> 
      <div class="col-6"> 
       <img src="image/beds.jpg" alt=""> 
      </div> 

      <div class="col-6"> 
       <h2>Nevex has the experiencce</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates velit, inventore praesentium. Delectus nulla, voluptates excepturi earum minima eligendi cumque ullam, opdfgdtio nostrum ipsa maiores cupiditate facilis sint debitis aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia id beatae nostrum ducimus possimus, odit eligendi fuga perspiciatis placeat nisi facilis unde adipisci illo fugit doloremque, at porro magni, perferendis?</p> 
      </div> 

     </div> 

そして、次の私のスタイリングコードです：

.row { 
    margin: 0 -10px; 
    margin-bottom: 10px; 
    } 
    .row:last-child { 
    margin-bottom: 0; 
    } 
    [class*="col-"] { 
     padding: 10px; 
    } 
    @media all and (min-width: 600px) { 
    .row { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    } 
    [class*="col-"] { 
     display: table-cell; 
    }  
    .col-1{ 
    width:100%; 
    } 
    .col-6{ 
    width:50%; 
    } 
    } 

どのように応答して画像のサイズを変更し、両方の列の内容を揃えることができますか？ 画像が高さの点で少し減少し、他の列の内容もdivの中央にあることを意味します。

Answer 1

1つの解決方法は、画像をそのdivのバックグラウンドとして使用し、一度それを行うと幅：100％にすることです。

ブートストラップを使用している場合は、クラス=「IMG応答性」と、それは自動的に画面の幅に適応する