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;
}

显然设定位置：相对;溢出：隐藏;在父div上。无论容器的大小如何，这都将定位您的图像中心。

图像也将包含其比例。

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

包含内部响应DIV的比例图像比例（宽度和高度）

1 个答案: