div寬度沒有更新調整大小

HTML：

<body> 
    <div class="outer"> 
     <div class="inner"> 
      <img src="http://placekitten.com/g/200/300" /> 
     </div> 
     <div class="inner"> 
      <img src="http://placekitten.com/g/200/200" /> 
     </div> 
    </div> 
</body>

CSS：

html, body { 
    height: 100%; 
    width: 100%; 
} 
.outer { 
    height: 30%; 
    border: 1px solid #000; 
} 
.inner { 
    position: relative; 
    display: inline-block; 
    height: 100%; 
    border: 1px solid #f00; 
} 
img { 
    position: relative; 
    display: inline; 
    height: 100%; 
    width: auto; 
}

Here's the preview

我想實現的目標： 我希望這兩個圖像都可以縮放到100％的.outer div高度，同時保持縱橫比和我希望.inner div具有它包含的圖像的寬度。

問題： 當我抓住窗口的底部和小型化：

在鉻：圖像和的div的高度被適當地改變，但.inner的div和圖像的寬度不被更新，這導致改變圖像的縱橫比。

在Firefox中：圖像縮放比例正確，但.inner div的寬度未更新。

當我抓住窗口的底部和升遷：無論是在鉻和Firefox

：圖像被適當地縮放，但是不更新.inner的div的寬度。

來源

2014-09-05 kihu

您已將height的.outer格設置爲30%的body。所以，當你縮小車窗時，身體變得更短。最終縱橫比不會保持。

您可以將最小高度設置爲.outer格。對於示例 - 190px

.outer { 
    height: 30%; 
    border: 1px solid #000; 
    min-height: 190px; /* Add this */ 
}

通過這樣做，.outer div的height仍將body小號height30%但這不會變得比190px短。

希望這個想法能幫助你。

來源

2014-09-05 10:04:42

哦，我不是故意要保持.outer div的寬高比。我只關心圖像比例，這些應該保持使用{height：100％; width：auto;}但是當我用.inner div封裝它們之後停止工作 – kihu 2014-09-05 10:09:12

@kihu好吧，如果在縮小瀏覽器窗口之後刷新瀏覽器，圖像比率實際上保持不變。但它是在調整大小的同時進行更新。我會看看是否有辦法讓這些改變也能夠生存下來。 – 2014-09-05 10:26:16

謝謝！對於什麼是值得的，當我刪除.inner div時，一切都會更新。但不幸的是，我需要他們。 – kihu 2014-09-05 10:29:21

div寬度沒有更新調整大小

回答

相關問題