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

Question

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

但事情是实现的是我的 www.rar 文件

我不知道如何修复它..它的比例错误，我无法像在 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

尝试：background-size: cover;适用于所有现代浏览器。

Answer 2

我通常这样做的方式是将我的所有内容包装在一个 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')";
}