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;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 2

我相信flex可以做到。您可以使用bootstrap行类，如下所示：
div class =＆＃34; row＆＃34;风格=＆＃34;显示：弯曲;＆＃34;

然后，使用class class class =＆＃34; col-md-6＆＃34;而不是box1和box2。对于每一个（它们适合包含它的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部分并取消注释＆lt; img＆gt;另一个版本的标签。

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

4 个答案: