css - 我希望我的(英雄)图像在屏幕尺寸变小时裁剪

Question

我正在尝试制作一个网站，但我遇到了一个问题。我有一张图片，我需要它始终填满整个屏幕。就像他们在这个网站上所做的那样:http://mollyandmepecans.com这是我的网站:https://mountainweb-cemre2002.c9users.io/Homepage.html

谢谢!

Answer 1

删除图像元素，然后添加此 CSS:

body {
    background-image: url("MountEverest.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
}

或者，如果您不想使用背景，请将其添加到您的 HTML 中以替换您的图像元素:

<div class="hero"></div>

这是你的 CSS:

.hero {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -100;

    background-image: url("MountEverest.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
}