调整窗口大小时如何执行图像以强制 DIV 大小答案

【问题标题】：How to do an image to force DIV size when resizing window调整窗口大小时如何执行图像以强制 DIV 大小
【发布时间】：2015-04-15 04:33:45
【问题描述】：

我有 2 个 div，一个 75%（左）和另一个 25%（右）。

在右侧，我有尺寸为 300x250 的广告，当调整窗口大小时，CSS 遵循百分比 (75% - 25%) 并且广告从窗口中弹出。

那么如何强制图像在正确的 div 内？在这种情况下，我希望优先级为 300x250（右侧），因此在调整窗口大小时，右侧应增大以包裹广告，而左侧应减小。

.div75 {
	float:left;
	width:75%;
	background:#f00;
}
.div25 {
	float:left;
	width:25%;
	text-align:center;
	background:#ff0;
}
.ad-pic {
	float:left;
	width:31%; /* 3 ads is 31%* and 4 is 23% */
	margin-right:1%;
	margin-left:1%;
	padding-top:20px;
}

<div class="div75">

<div class="ad-pic">
<img src="http://static.wixstatic.com/media/deb55b_3f92f35116534786adc903246daeddfb.jpg_srz_400_300_75_22_0.50_1.20_0.00_jpg_srz" width="100%" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua... </span>
</div>

<div class="ad-pic">
<img src="http://static1.businessinsider.com/image/4bd6f13d7f8b9aa520190300-1200/rutherford-b-hayes-october-4-1822-january-17-1893.jpg" width="100%" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua... </span>
</div>

<div class="ad-pic">
<img src="http://static.businessinsider.com/image/82b9b9143b51b9492cde8f00/image.jpg" width="100%" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua... </span>
</div>

</div>

<div class="div25">
<img src="https://s-media-cache-ak0.pinimg.com/736x/b2/7d/85/b27d85b41b69ddda088358211f387a89.jpg" />
</div>

这是一个例子：

http://jsfiddle.net/sp571pbk/

【问题讨论】：

标签： html image css resize

【解决方案1】：

您可以使用 css3 的 calc() 属性，允许您将左侧 div 设为 calc(100% - 300px) 宽度。

http://jsfiddle.net/sp571pbk/3/

.div75 {
    float:left;
    width:calc(100% - 300px);
    background:#f00;
}
.div25 {
    float:left;
    width:300px;
    text-align:center;
    background:#ff0;
}

只要确保您可以在目标浏览器上使用它即可： http://caniuse.com/#feat=calc

【讨论】：