如何将图像保持在页面的50％并包含其高度

Question

我有一个容器，容器中有两个部分，两个部分的宽度均为50％。 在右侧容器中是图像。 我希望左右框始终保持相同的高度，并且图像始终始终保持50％的宽度。

我无法弄清楚如何始终将图像保持在容器的整个高度和宽度上，而又不会完全使图像看起来糟透了。 即使图像的某些部分被切掉，也可以。

我该怎么做呢？

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

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

Answer 1

您必须提供图像height:100%; width:auto; 并向容器overflow:hidden;

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

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

Answer 2

我相信flex可以做到。 您可以使用引导行类，如下所示：
div class =“ row” style =“ display：flex;”

然后，不使用box1和box2，而是对每个类使用div class =“ col-md-6”类（它们适合包含它的div的一半[50％]）。 试试看。 对不起，英语不好。

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>标记以获取另一个版本。