如何用vh div缩放图像高度

我试图让这个图像按高度缩放到浏览器，所以它永远不会导致滚动（它将是一个灯箱，具有不同的图像比例）但它不想调整图像来填充父div，我不知道为什么。它也通过向左滑动而不是居中来缩放。如何用vh 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>

来源

2017-07-19 duckyduck

这应该修复它：

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

来源

2017-07-19 03:12:08

感谢您花时间做出回应，这已将其固定为缩小比例，但它仍然保留在较大窗口上的小中心图像上，例如刚刚居中的右上角。 – duckyduck

@duckyduck，为什么要将lightbox将图像放大到其实际大小以上，看起来像素化了吗？你似乎想用''而不是'background-image'实现'background-size：contain'行为，我建议你只使用'background-image'。 –

我会看看背景图像非常感谢，我想我正在尝试一种随意的方式，可以将它放在更大的屏幕上，而不必为移动设备增加文件大小，但这是另一个问题。学习与火的审判对不起，以纠缠你的问题，所以总可选奖金问题。你也许也知道一种方法来调整.modal-con帐篷宽度到mySlides？我使用模态内容来对齐我的prev，next和close按钮，以防止粘贴每个单独幻灯片上的按钮。 – duckyduck

试试这个。

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

来源

2017-07-19 03:11:59

不遗憾的是改变任何东西。 :( – duckyduck

你可以把你的模式，内容高度相同图像高度。 img宽度可以是模式内容的一半，因为您希望它保持居中。另外，使用flex可以给你想要的确切结果。

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

这里是Fiddle

来源

2017-07-19 03:19:13

这扭曲了图像，所以它不起作用。 – duckyduck

如何用vh div缩放图像高度

回答

相关问题