包含在响应式 DIV 中的比例图像比例（宽度和高度）

Question

我有一个响应式 DIV，它设置为浏览器宽度 (100%) 和高度 (50%) 的百分比。在该 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;
}

Answer 1

我认为使用这个效果最好。

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

明显设置位置：relative;和溢出：隐藏；在父 div 上。无论容器大小如何，这都会定位您的图像中心。

图像还将包含其比例。

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