html - 背景图像缩放到实际宽度但保存比例

Question

我完全是 html css 的新手，我发现写我想要实现的东西很烦人……不是那么简单的语言。 一般来说，我想达到像第一张图片那样的效果，那里有手掌 - https://spacebox.io/

但事情是实现的是my www.rar file

我不知道如何修复它..它的比例错误，我无法像在 spacebox.io 上那样获得结果

#topka{
    display: block;
    position: relative;
    top: 56px;
    margin: auto;
    height:350px;
    max-width: 100%;
    min-width: 100%;
    background-image: url("img/topka.png");
    background-position: center; 
    background-size:100% 1200px;
    background-repeat: no-repeat;
    width:100%;

Answer 1

我通常这样做的方式是将我的所有内容包装在一个 div 中，并为该 div 设置适合屏幕的样式并将所有内容放入其中，例如:

HTML

<div id="background-cover">

    <!-- All page layout/divs/content here -->

</div>

然后使用此代码在 css 中定位该元素，其中 background.jpg 是您的文件名。您可以使用 center center 获得完美的居中图像:

#background-cover {
    width: 100%;
    height: 100%;
    background: url('background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.background.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.jpg', sizingMethod='scale')";
}