部分不在另一个 div 内缩放答案

【问题标题】：Section not scaling within another div部分不在另一个 div 内缩放
【发布时间】：2014-01-30 18:29:07
【问题描述】：

我需要 .hero-overlay（小麦啤酒玻璃部分）容器在按比例缩小时做出响应并保持包含在 hero-image（960x300 图像）中。现在，当浏览器变窄时，div 会溢出 hero-image。

在小型设备上，例如手机（320 像素或更小），我计划隐藏英雄叠加层。在中型到桌面设备上，我需要图像和叠加层按比例缩放。

<section class="header-hero">
    <div class="hero-image"><img src="http://placehold.it/960x300"/></div>
        <div class="hero-overlay span5">
            <div class="row">
                <div class="span12">
                    <p class="lead">Wheat beer glass</p>
                    <p>Wheat beer glass, anaerobic malt extract tulip glass. hops aau tulip glass, yeast heat exchanger hops bottle conditioning?</p>
                </div>
            </div>
        </div><!-- end hero-overlay -->
</section>

【问题讨论】：

您希望如何使其在较小宽度的设备中可见？解决方案仅取决于该要求。

标签： html css responsive-design fluid-layout

【解决方案1】：

我不确定这是否是您所需要的。我刚刚添加了 100% 的宽度；对于 .hero-overlay 并将图像和 .hero-overlay 的固定高度设置为 300px。似乎在工作

    .hero-overlay { 
        background:#000;
        opacity:0.5; 
        color:#FFF; 
        padding:20px; 
        position:relative; 
        height:300px; 
        width: 100%;
        float:right;
}

  .hero-image img {
      max-width:100%;
      position:absolute;
      right:0;
      top:0;
      height:300px;

}

【讨论】：

【解决方案2】：

看起来您看到的问题是，当页面重新调整大小时，英雄图像会按比例缩小，因为它设置为max-width:100%;。所以溢出的不是hero-overlay，而是缩小的.hero-image。

现在，至于您的解决方案，这可以通过多种方式处理，具体取决于您想如何解决问题以及您愿意做出哪些权衡，但此解决方案可能对您有用：

HTML：

<div class="hero-image"></div> //remove the image from here

CSS：

.hero-image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 300px;
    background: url('http://placehold.it/960x300') no-repeat; // make it a background image here
    background-position: center;  
}

EXAMPLE FIDDLE

这样做的好处是，无论屏幕大小如何，您都可以获得全高图像，并且不会随着屏幕变小而挤压图像。唯一的缺点是，当页面缩小时，外边缘会被切断（如果你同意的话）。

【讨论】：