包含內部響應DIV的比例圖像比例（寬度和高度）

我有一個設置爲瀏覽器寬度（100％）和高度（50％）百分比的響應DIV。在DIV內部，我需要放置一個圖像，每當瀏覽器調整大小時，圖像應該按比例調整和適應。圖像最大高度和最大寬度因此由DIV的高度和寬度給出。包含內部響應DIV的比例圖像比例（寬度和高度）

當您更改瀏覽器寬度（以及DIV）時，圖像適應性良好，但在瀏覽器高度變得非常小時與下面的DIV重疊。

見的jsfiddle例如：https://jsfiddle.net/fnhropr3/

我如何可以包含DIV內的圖像垂直和水平保持它的比例？

HTML：

<div class="section section-white"> 
<img src="https://www.cpp.edu/~international/study-abroad/img/jXMx4mQz6MsnhP1FSKp2TJMt.jpeg" id="image"/> 
</div><!--section--> 
<div class="section section-grey"> 
<h1>Heading</h1> 
</div><!--section-->

CSS：

html{ 
width:100%; 
height:100%; 
} 
body{ 
width:100%; 
height:100%; 
} 
.section{ 
width:100%; 
height:50%; 
padding: 5%; 
text-align:center; 
} 
.section-white{ 
background-color: #fff; 
} 
.section-grey{ 
background-color: #ccc; 
} 
#image{ 
width: 70%; 
max-width: 500px; 
height: auto; 
max-height: 500px; 
-moz-box-shadow: 0px 0px 15px #bbb; 
-webkit-box-shadow: 0px 0px 15px #bbb; 
box-shadow:  0px 0px 15px #bbb; 
}

來源

2016-03-14 rainerbrunotte

你可以用'最大高度：100％;'而不是https://jsfiddle.net/fnhropr3/1/ –

可將圖像設置爲背景圖片？ – Aaron

使用最大高度：100％不成比例地延伸圖像 – rainerbrunotte

我認爲使用，這將是最好的。

img { 
    bottom: -5000px; 
    left: -5000px; 
    margin: auto; 
    min-height: 100%; 
    min-width: 100%; 
    position: absolute; 
    right: -5000px; 
    top: -5000px; 
}

顯然設置位置：相對;和溢出：隱藏;在父div上。無論容器大小如何，這將定位您的圖像中心。

圖片也將包含其比例。

https://jsfiddle.net/fnhropr3/6/

來源

2016-03-14 12:59:15 TSlegaitis

真棒！效果很好，但是我不得不改變你的最低高度，以使其工作 – rainerbrunotte

很高興它的工作:)最大高度可能會拉伸圖像。最小高度將「裁剪」圖像以適合。要時刻銘記在心：） – TSlegaitis

包含內部響應DIV的比例圖像比例（寬度和高度）

回答

相關問題