Question

我需要.hero-overlay（小麦啤酒杯部分）容器在按比例缩小时保持响应并保持在英雄图像（960x300图像）内。现在，当浏览器缩小时，div会溢出英雄图像。

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

<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>

Answer 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;

}

Answer 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

这样做的好处是无论屏幕大小如何，都可以将图像置于全高，并且随着屏幕变小，图像也不会挤压。唯一的缺点是，当页面尺寸缩小时，外边缘会被切断（如果您对它没有问题）。

不在另一个div内扩展的部分

2 个答案: