不在另一個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內縮放

回答

相關問題