レスポンシブな画像とグリッド

Question

私は2つのボックスを持っています.1つは画像を含み、もう1つはテキストです。 は、どのように私はボックスのサイズに応じて画像のフィット感を作ることができ、あなたが私のコードで見ることができるように画像がボックスサイズの上に流れている瞬間の原因：？

以下

 <div class="left-column"> 
     <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt=""> 
    </div> 

    <div class="right-column"> 
     <h2>Nevex has the experience</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum rem a tempore tenetur unde alias amet deserunt veritatis. Nemo, iste, quis! Eligendi dolores similique id nostrum non, in velit?</p> 
     <button class="button" type="button" onclick="There will be more information in future">FIND OUT MORE</button> 
    </div>   

は、CSS

です終わり

* { 
    box-sizing: border-box; 
} 
    img{ 
    max-width=100%; 
    height: auto; 
    width: auto; 
    } 
.left-column{ 
    width:50%; 
    height:auto; 
    float: left; 
    border:1px solid red; 
} 
.right-column{ 
    width:50%; 
float: left; 
border:1px solid red; 
} 

https://jsfiddle.net/Wosley_Alarico/b2htLvcj/4/

Iは同じサイズとメディアクエリを使用して、中央に位置合わせテキストを隣同士に両方のボックスを持っていると思います。

助けていただければ幸いです。

Answer 1

フレックスボックスは、カラムのサイズに使用できます。 ただし、contains divを追加する必要があります。

例：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
img{ 
 
    max-width:100%; 
 
} 
 

 
.header{ 
 
    border:1px solid red; 
 
} 
 

 
.left-column{ 
 
    width:50%; 
 
    border:1px solid red; 
 
} 
 

 
.right-column{ 
 
    width:50%; 
 
    border:1px solid red; 
 
    display:inline-block; 
 

 
    margin: 0; 
 
vertical-align:middle; 
 
} 
 

 
.content{ 
 
     display:flex; 
 
    }

<div class="content"> 
 
<div class="left-column"> 
 
      <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt=""> 
 
     </div> 
 
     
 
     <div class="right-column"> 
 
      <h2>Nevex has the experience</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum rem a tempore tenetur unde alias amet deserunt veritatis. Nemo, iste, quis! Eligendi dolores similique id nostrum non, in velit?</p> 
 
      <button class="button" type="button" onclick="There will be more information in future">FIND OUT MORE</button> 
 
     </div>   
 
</div>

Answer 2

あなたのCSSコードに誤りがあります：max-width=100%;はmax-width:100%;で、2点あります。

Answer 3

プレイスクラスimageとDIV内の画像。これをチェックしてください。

HTML

<div class="image"> 
     <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt=""> 
    </div> 

CSS

.image img { 
    max-width:100% !important; 
    max-height:100% !important; 
    display:block; 
}