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

Answer 2

如果需要覆盖img元素，请使用object-fit。

.hero{
  object-fit: cover;
}

https://css-tricks.com/almanac/properties/o/object-fit/

我希望在屏幕尺寸变小时裁剪我的（英雄）图像

2 个答案: