イメージをページの50％に保ち、その高さを含む方法

Question

私はコンテナを持っていて、コンテナ内には両方とも50％幅の2つのセクションがあります。右側のコンテナには画像があります。左右のボックスを常に同じ高さにし、画像を常に50％の幅にすることを願っています。

完全にイメージをひどく見せてしまうことなく、イメージをコンテナの高さと幅に合わせて保持する方法を理解できません。画像の一部が切り取られても、それは問題ありません。

これを行うにはどうすればよいですか？

html, body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
#box-container { 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 
#box1, #box2 { 
 
\t width: 50%; 
 
\t height: 500px; 
 
\t display: inline-block; 
 
} 
 
#box1 { 
 
\t background: blue; 
 
} 
 
#box2 { 
 
} 
 
#box2 img { 
 
\t width: 100%; 
 
\t height: auto; 
 
}

<div id="box-container"> 
 
\t <div id="box1"> 
 
\t </div><div id="box2"> 
 
\t \t <img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt=""> 
 
\t </div> 
 
</div>

Answer 1

私はフレックスがそれを作ることができると信じています。次のように、ブートストラップ行クラスを使用できます。
div class = "row" style = "display：flex;"

の代わりに、box1とbox2の代わりに、それぞれdivクラス= "col-md-6"を使用します（divを含むdivの半分[50％]に一致します）。試してみる。英語が貧しい人には申し訳ありません。

Answer 2

あなたがイメージheight:100%;とwidth:auto;を与えなければならないと、コンテナoverflow:hidden;

html, body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
#box-container { 
 
\t width: 100%; 
 
\t height: auto; 
 
    overflow:hidden; 
 
    
 
} 
 
#box1, #box2 { 
 
\t width: 50%; 
 
\t height: 500px; 
 
\t display: inline-block; 
 
} 
 
#box1 { 
 
\t background: blue; 
 
} 
 
#box2 { 
 
} 
 
#box2 img { 
 
\t width: auto; 
 
\t height: 100%; 
 
}

<div id="box-container"> 
 
\t <div id="box1"> 
 
\t </div><div id="box2"> 
 
\t \t <img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt=""> 
 
\t </div> 
 
</div>

Answer 3

#box1, #box2 { 
     width: 50%; 
     height: 500px; 
     display: inline-block; 
     overflow: hidden; 
    } 
    #box2 img { 
     /* width: 100%; */ 
     height: 100%; 
    } 

Answer 4

に私は、これはあなたが

<style> 
    .boxes{ 
     width:50%; 
     float:left; 
     border:1px solid black; 
     box-sizing:border-box; 
     height:1000px; 
    } 

    img{ 
     max-width:100%; 
    } 
    #sectionOne{ 
     background-image:url("http://optimumwebdesigns.com/images/demolition1.jpg"); 
    } 
</style> 
<div id="wrapper"> 
    <div class="boxes" id="sectionOne"> 
     <!-- <img src="http://optimumwebdesigns.com/images/demolition1.jpg"> --> 
    </div> 
    <div class="boxes"> 
     THis is the noather Div 
    </div> 
</div> 

を達成したいのか、だと思います

#serctionOne部分をコメントアウトし、別のバージョンの<img>タグをコメント解除します。