如何在保持图片不失真的同时制作具有不同尺寸图像的响应式图库？

Question

我想解决的问题的演示：https://www.bootply.com/GcLnOddfEZ

因此，假设我的图像大小不同，我想让它们看起来大小相同，而不会扭曲原始图片（至少不会太多）同时保持它们全部响应。我该怎么回事呢？

Answer 1

这就是你想要的：jsfiddle.net

.img-cont {
    height: 300px;
}

img{
    display: block;
    width: 100vw;
    height: 100vh;
    max-width: 100%!;
    max-height: 100%!;
    object-fit: cover;
}