如何使用vh div

Question

我试图让这个图像按高度缩放到浏览器，因此它永远不会导致滚动（它将是一个具有不同图像比例的灯箱）但是它并不想将图像调整为填写父div，我不知道为什么。它也可以向左滑动而不是居中。

https://jsfiddle.net/hrfLwyjd/

<style> 
.modal-content {
    width:80vw;
    height:80vh;
    background:yellow;
    display:flex;
    justify-content:center;
}   
.mySlides img {
    width:100%;
    height:auto;
}
</style>


 <div class="modal-content">

    <div class="mySlides">
     <img src="images/5_2.jpg">
    </div>

 </div>

Answer 1

这应该解决它：

.modal-content {
  width: 80vw;
  height: 80vh;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mySlides img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
}

<div class="modal-content">
  <div class="mySlides">
    <img src="http://i.imgur.com/cN0XcVQ.jpg">
  </div>
</div>

更新：
根据评论，看起来你还希望在小于灯箱时放大图像。为此，最简单的解决方案是：

.modal-content {
  width: 80vw;
  height: 80vh;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mySlides {
  background: transparent 50% 50% no-repeat /contain;
  height: 100%;
  width: 100%;
}

<div class="modal-content">
  <div class="mySlides" style="background-image:url('http://i.imgur.com/cN0XcVQ.jpg')"></div>
</div>

Answer 2

试试这个。

 <div class="modal-content">

    <div class="mySlides">
     <img src="http://i.imgur.com/cN0XcVQ.jpg">
    </div>
    <div class="mySlides">
     <img src="http://i.imgur.com/cN0XcVQ.jpg">
    </div>
    <div class="mySlides">
     <img src="http://i.imgur.com/cN0XcVQ.jpg">
    </div>
    <div class="mySlides">
     <img src="http://i.imgur.com/cN0XcVQ.jpg">
    </div>

 </div>

CSS

.modal-content {
    width:80vw;
    height:80vh;
    background:yellow;
    display:flex;
    justify-content:center;
}   
.mySlides img {
    width:100%;
    height:auto;
  flex:1;
}

Answer 3

您可以保持模态内容高度与图像高度相同。 img width可以是模态内容的一半，因为你希望它保持在中心位置。此外，使用flex可以为您提供所需的确切结果。

.modal-content {
    width:80vw;
    height:80vh;
    background:yellow;
    display:flex;
    justify-content:center;
}   
.mySlides img {
    width:40vw;
    height:80vh;
  flex: 1;
}

以下是Fiddle

Answer 4

这样使用width：100vmin和height：vmin：

.modal-content {
  background:yellow;
  position: relative;
}   
.mySlides img {
  position: relative;
  max-width: 100%;
  width:80vmin;
  height:80vmin;
  margin-left: auto;
  margin-right: auto:
}

干杯！