css 如何用vh div缩放图像高度

piztneat 于 2023-06-25 发布在其他

关注(0)|答案(4)|浏览(136)

我试图让这个图像缩放到浏览器的高度，所以它永远不会导致滚动（这将是一个不同的图像比例的光框），但是它不想调整图像的大小来填充父div，我不知道为什么。它还通过向左滑动而不是居中来缩放。

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

css

来源：https://stackoverflow.com/questions/45180148/how-to-scale-image-height-with-vh-div

4条答案

按热度按时间

btxsgosb1#

这应该可以修复它：

.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 no-repeat center / contain;
  height: 100%;
  width: 100%;
}

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

赞(0）回复(0）举报 2023-06-25

z4iuyo4d2#

使用width：100 vmin和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:
}

干杯！

赞(0）回复(0）举报 2023-06-25

iecba09b3#

您可以保持您的模态内容高度与图像高度相同。img宽度可以是modal-content的一半，因为你希望它保持在中间。另外，使用flex可以给予你想要的确切结果。

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

这里是Fiddle

赞(0）回复(0）举报 2023-06-25

eqqqjvef4#

试试这个

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

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何用vh div缩放图像高度

4条答案

相关问题

热门标签

最新问答