如何隐藏部分填充/边距图像而不填充/破坏图像的主容器div？

Question

假设图像包含在DIV1中，文本包含在DIV2中。 Div1和Div2都是浮动左。所以我想隐藏填充的图像。 由于我的DIV2内容是动态的，所以我不想在任何div中设置高度。 甚至大小调整：填充框在此代码或浏览器中不起作用。 通过裁剪显示器支架，我的欲望输出如下图所示：

＆＃13;

＆＃13;

.monitor-area
{
	background:#ebebeb;
	height:auto;
}
.monitor-area:after
{
	content:'';
	display:block;
	clear:both;
}

.monitor
{
	width:50%;
	float:left;
	overflow:hidden;
}
.monitor img
{
	width:100%;
}
.monitor-content
{
	width:44%;
	overflow:hidden;
	float:right;
	padding-right:2%;
}
.monitor-title
{
	margin-top:80px;
}

.monitor-title h1
{
	color:#333333;
	font-size:30px;
	font-weight:normal;
	text-transform:uppercase;
}
.monitor-text
{
}

＆＃13;

<section  class="monitor-area">
	<div class="monitor">
	<img src="https://image.ibb.co/ioQ47Q/monitor.png" alt="448*250px" />
	</div>
	<div class="monitor-content">
		<div class="monitor-title">
		<h1>A CATCHY TITLE</h1></div>
		
		<div class="monitor-text">
		<p>Cursuspenatisaccum ut curabitur nulla tellus tor 
		ames a in curabitur pede. Idet mollisi eros dis orci 
		congue elis et curabitur consequam intesque. 
		Curabiturpisametur in ante.</p>
		</div>
		<div class="monitor-button">
		<a href="">read more 
		<i class="fa fa-angle-double-right"></i>
		</a>
		</div>
	</div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.monitor-area
{
	background:#ebebeb;
	height:auto;
}
.monitor-area:after
{
	content:'';
	display:block;
	clear:both;
}

.monitor
{
	width:50%;
	float:left;
	overflow:hidden;
max-height:205px
}
.monitor img
{
	width:100%;
}
.monitor-content
{
	width:44%;
	overflow:hidden;
	float:right;
	padding-right:2%;
}
.monitor-title
{
	margin-top:80px;
}

.monitor-title h1
{
	color:#333333;
	font-size:30px;
	font-weight:normal;
	text-transform:uppercase;
}
.monitor-text
{
}

<section  class="monitor-area">
	<div class="monitor">
	<img src="https://image.ibb.co/ioQ47Q/monitor.png" alt="448*250px" />
	</div>
	<div class="monitor-content">
		<div class="monitor-title">
		<h1>A CATCHY TITLE</h1></div>
		
		<div class="monitor-text">
		<p>Cursuspenatisaccum ut curabitur nulla tellus tor 
		ames a in curabitur pede. Idet mollisi eros dis orci 
		congue elis et curabitur consequam intesque. 
		Curabiturpisametur in ante.</p>
		</div>
		<div class="monitor-button">
		<a href="">read more 
		<i class="fa fa-angle-double-right"></i>
		</a>
		</div>
	</div>
</section>