Question

我试图让VERTICAL图像拉伸，自动适合任何屏幕的顶部和底部。我如何在CSS3中做到这一点？

这就是我所拥有的，如果它会有所帮助：

.logo{
   height: 700px;
   width: 150px;
}

它也不是背景图片。

Answer 1

.logo{
  height: 100vh;
}

您可能还想将宽度设置为auto以保留比例...

（reference）

Answer 2

最好的方法是使它成为div的背景，其高度和宽度设置为100％，然后给它一个特殊的背景设置，这样它就不会被扭曲。也许这就是你需要的。

/*
This is needed for 100% height of the div as the percentage refers to the parent element.
*/
html, body {
    height: 100%;
}

/*
This is the actual image
*/
.image {
    background: #000 url(https://www.google.com/images/srpr/logo11w.png) repeat-x;
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    height: 100%;
}

<body>
    <div class="image"></div>
</body>

Answer 3

试试这个：

<!DOCTYPE html>
<html>
<head>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        img {
            height: 100%;
            width: auto;
        }
    </style>
</head>
<body>
    <img src="https://www.google.com/images/srpr/logo11w.png"/>
</body>
</html>

如何让图像伸展自动以适应CSS3中的屏幕？

3 个答案: