css - 包含在响应式 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;
}

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

图像也将包含它的比例。

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