javascript - 最适合显示的图像

Question

有没有一种方法可以使 css/html5 以最佳方式将图像适合视口，从而不会发生裁剪？

我将不胜感激上面的解决方案。以下是它可能在代码中完成的方式：

如果图像的纵横比（H/W）大于显示，则图像 css 为 height:100%, width:auto;

如果图像的纵横比 (H/W) 小于显示，则图像 css 将为 height:auto, width:100%

这似乎需要很多工作，有没有更简单的解决方案？

山姆

标签： javascriptdisplay

Answer 1

您可以将其设置为您的 div 背景并赋予此样式

    <div class='my-image.jpg'></div>

    .my-image {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: center;
        height: 100vh;
        width: 100vw;
        background-image: url("https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg");
    }