不在另一个div内缩放

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

在小型设备上，例如手机（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>

来源

2014-01-29 heymila

如何使其在较小宽度的设备中显示？解决方案仅取决于该要求。 –

我不知道如果这是你需要的东西。我只是增加了宽度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;

}

来源

2014-01-29 04:56:33 qualebs

它看起来像你看到的问题是，在页面的时候重新大小的英雄形象按比例缩小比例，因为它被设置为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

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

来源

2014-01-29 05:07:22 badAdviceGuy

不在另一个div内缩放

回答

相关问题