这里的网站noob，请放心吧。
我目前正在为我自愿工作的视频游戏开发一个响应式网站。在大多数情况下，网站现在反应非常快，但是我还有一个障碍，对于我的一生，我似乎无法弄清楚。
英雄图像（徽标和背景位于页面顶部）没有正确调整大小。它似乎在调整高度而不是宽度，这是一个问题，因为在移动设备上，它似乎大量切掉了徽标的两侧。
下面是首页的HTML和整个网站的CSS。由于代码太长，无法在此处包含，所以我没有在CSS中使用“ @ font-face”。
由于我是网站开发领域的新手，并且我会尽自己最大的努力学习新事物，因此我实际上并没有能力尝试许多不同的事物。我涉猎了max-height和max-width，并且我还尝试过切换值，以使宽度为100％，但高度设置为auto。似乎没有任何作用。实际上，当我做后者时，整个图像就消失了。
HTML：
<html lang="en">
<head>
<title>Welcome! | Toontown's Funny Farm</title>
<meta charset="UTF-8">
<meta name="description" content="The fan-made single-player sequel to Disney's Toontown Online.">
<meta name="keywords" content="Toontown,Toontown's,Funny,Farm,sequel,single,player,Disney,Online">
<meta property="og:title" content="Welcome! | Toontown's Funny Farm" />
<meta property="og:description" content="The fan-made single-player sequel to Disney's Toontown Online." />
<meta property="og:site_name" content="Toontown's Funny Farm" />
<meta property="og:url" content="https://www.toontownsfunnyfarm.com/home" />
<meta property="og:image" content="toontownsfunnyfarm.com/images/header.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/icons/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/icons/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="images/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
<link rel="manifest" href="images/icons/manifest.json">
<meta name="msapplication-TileColor" content="#993623">
<meta name="msapplication-TileImage" content="images/icons/ms-icon-144x144.png">
<meta name="theme-color" content="#993623">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://kit.fontawesome.com/8b8cf6f445.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script src="responsivenav.js"></script>
</head>
<body>
<div class="hero-image"></div>
<div class="topnav" id="myTopnav"><a href="https://www.toontownsfunnyfarm.com/" class="active">Home</a><a href="play">Play</a><a href="release-notes">Release Notes</a><a href="faq">FAQ</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i></a>
</div>
<div>
<h1 class="intro">Welcome to Funny Farm!</h1>
<p class="center">Toontown's Funny Farm is a free-to-play fan-made single-player sequel to Disney's Toontown Online!
<br>Want to know more? Head on over to the FAQ page!</p>
<hr> </div>
<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>
<div class="row">
<div class="column">
<h1 class="center">Latest Announcements</h1>
<ul class="announcements">
<li>Welcome to our new and improved website! We've done some tweaking and cleaning up, and more updates will come to the site soon.</li>
<li>Toontown's Funny Farm version 1.4.0 has been released! Go to the 'Play' page to download the NEW launcher and begin playing! Also, to find out more about what this update holds, head to the 'Release Notes' page.</li>
<li>Join our Discord server to get more involved with our community. Meet other players, get announcements from the Toontown's Funny Farm team, and see exclusive sneak peeks of future content!</li>
</ul>
</div>
<div class="column">
<ul class="rslides">
<li><img src="images/screenshots/1.png" alt=""></li>
<li><img src="images/screenshots/2.png" alt=""></li>
<li><img src="images/screenshots/3.png" alt=""></li>
<li><img src="images/screenshots/4.png" alt=""></li>
<li><img src="images/screenshots/5.png" alt=""></li>
<li><img src="images/screenshots/6.png" alt=""></li>
<li><img src="images/screenshots/7.png" alt=""></li>
<li><img src="images/screenshots/8.png" alt=""></li>
<li><img src="images/screenshots/9.png" alt=""></li>
</ul>
</div>
</div>
<footer>
<div class="footer">
<h2>Follow us on Social Media!</h2> <a target="_blank" href="https://www.facebook.com/toontownsfunnyfarm"><i class="fab fa-fw fa-facebook"></i></a> <a target="_blank" href="https://twitter.com/TTsFunnyFarm"><i class="fab fa-fw fa-twitter"></i></a> <a target="_blank" href="https://discord.gg/toontownsfunnyfarm"><i class="fab fa-fw fa-discord"></i></a>
<p class="disclaimer">Toontown's Funny Farm is in no way affiliated with The Walt Disney Company and/or Disney Interactive.
<br>Toontown's Funny Farm is a free-to-play video game created using publicly available information and assets, and does not generate revenue of any kind for its staff members.
<p>
</div>
</footer>
</body>
</html>
CSS：
body {
height: 100%;
margin: 0;
background-image: url(images/clouds.png);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0%;
margin-top: 2.58vh
}
.rslides li {
position: absolute;
display: none;
width: 100%
}
.rslides li:first-child {
position: relative;
display: block;
float: right
}
.rslides img {
display: block;
height: auto;
float: left;
width: 85%;
border: none;
border-radius: 3vh
}
.column {
float: left;
width: 50%
}
.row:after {
content: "";
display: table;
clear: both
}
h1 {
font-family: 'Panton Black Caps';
font-size: 4.13vh;
text-shadow: 0.1032vh 0.1032vh 0 #cdcdcd
}
.intro {
font-family: 'Panton Black Caps';
font-size: 6.2vh;
text-align: center
}
.subheading {
padding-left: 13%;
padding-right: 13%
}
h2 {
font-family: 'Panton Black Caps';
font-size: 3.1vh;
text-shadow: 0.1032vh 0.1032vh 0 #000
}
p {
font-family: 'Impress BT';
font-size: 2.7vh;
padding-left: 14%;
padding-right: 14%;
text-shadow: 0.1032vh 0.1032vh 0 #cdcdcd
}
hr {
border: 0.155vh solid #696969;
border-radius: 1.032vh;
opacity: .15;
margin: .5% 7%
}
ul {
padding-left: 17%;
padding-right: 17%
}
.announcements {
padding-right: 6%
}
li {
font-family: 'Impress BT';
font-size: 2.69vh;
text-shadow: 0.1032vh 0.1032vh 0 #cdcdcd
}
.center {
text-align: center
}
.hero-image {
background-image: url(images/header.png);
height: 50%;
width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover
}
.topnav {
background-color: #993623;
overflow: hidden;
font-family: 'Panton Black Caps';
text-shadow: 0.1032vh 0.1032vh 0 #000;
text-align: center
}
.topnav a {
float: none;
display: inline-block;
color: #fff;
text-align: center;
padding: 2.064vh 3.612vh;
text-decoration: none;
font-size: 3.302vh;
transition: 0.055s
}
.topnav a:hover {
background-color: #ca723b;
color: #fff
}
.topnav .active:hover {
background-color: #ca723b;
}
.topnav .icon {
display: none
}
.disclaimer {
font-size: 1.858vh;
padding-top: .5%;
text-shadow: 0.1032vh 0.1032vh 0 #000
}
.footer {
background-color: #993623;
color: #fff;
padding: .2%;
text-align: center;
margin-top: 10%
}
.fa-discord,
.fa-facebook,
.fa-twitter {
font-size: 8.5vh;
color: #fff;
text-shadow: 0.1032vh 0.1032vh 0 #000;
transition: 0.075s
}
.fa-discord:hover {
color: #7289da;
text-shadow: 0.1032vh 0.1032vh 0 #000044
}
.fa-facebook:hover {
color: #1877f2;
text-shadow: 0.1032vh 0.1032vh 0 #00005c
}
.fa-twitter:hover {
color: #38a1f3;
text-shadow: 0.1032vh 0.1032vh 0 #000b5d
}
table {
overflow-x:auto;
font-family: 'Impress BT';
font-size: 2.477vh;
background-color: rgba(242, 242, 242, .7);
text-shadow: 0.1032vh 0.1032vh 0 #cdcdcd;
margin: auto;
width: 80%;
border-collapse: collapse
}
td {
padding: 1.2%;
border: 0.3096vh solid #e6e6e6;
}
.dlwindows {
text-decoration: none;
outline: none;
background-image: linear-gradient(#39a3ed, #1280cf);
width: 41.2797vh;
color: #c4efff;
border: none;
border-radius: 2.57998vh;
text-shadow: 0.516vh 0.516vh 0 #004582;
font-family: Minnie;
padding: 3.096vh 3.612vh;
margin: 2.064vh;
font-size: 6.192vh;
cursor: pointer
}
.dlwindows:hover {
background-image: linear-gradient(#91cdf6, #76b7e5);
color: #ddf6ff;
text-shadow: 0.516vh 0.516vh 0 #6b93b7
}
.dlmacos {
text-decoration: none;
outline: none;
background-image: linear-gradient(#a8b0bd, #7f8793);
width: 41.2797vh;
color: #fefefe;
border: none;
border-radius: 2.57998vh;
text-shadow: 0.516vh 0.516vh 0 #646672;
font-family: Minnie;
padding: 3.096vh 3.612vh;
margin: 2.064vh;
font-size: 6.192vh;
cursor: pointer
}
.dlmacos:hover {
background-image: linear-gradient(#ced3d9, #b5b9c0);
color: #fff;
text-shadow: 0.516vh 0.516vh 0 #a5a6ad
}
.dllinux {
text-decoration: none;
outline: none;
background-image: linear-gradient(#f3aa3d, #e88d1c);
width: 41.2797vh;
color: #ffdb9e;
border: none;
border-radius: 2.57998vh;
text-shadow: 0.516vh 0.516vh 0 #77351a;
font-family: Minnie;
padding: 3.096vh 3.612vh;
margin: 2.064vh;
font-size: 6.192vh;
cursor: pointer
}
.dllinux:hover {
background-image: linear-gradient(#f8ce8e, #f2bd7b);
color: #ffeac7;
text-shadow: 0.516vh 0.516vh 0 #b08a7a
}
.dlandroid {
text-decoration: none;
outline: none;
background-image: linear-gradient(#a4c639, #8ab747);
width: 41.2797vh;
color: #e2efb8;
border: none;
border-radius: 2.57998vh;
text-shadow: 0.516vh 0.516vh 0 #4a6025;
font-family: Minnie;
padding: 3.096vh 3.612vh;
margin: 2.064vh;
font-size: 6.192vh;
cursor: pointer
}
.dlandroid:hover {
background-image: linear-gradient(#cadd8c, #bbd594);
color: #eef6d6;
text-shadow: 0.516vh 0.516vh 0 #96a381
}
@media screen and (max-width: 900px) {
.column {
width: 100%
}
.rslides {
width: 88%;
margin-left: auto;
margin-right: auto
}
.rslides li {
width: 100%
}
.rslides img {
width: 100%
}
.announcements {
padding-left: 12%;
padding-right: 12%
}
}
@media screen and (max-width: 770px) {
.topnav a:not(:first-child) {
display: none
}
.topnav a {
float: left;
display: block
}
.topnav a.icon {
float: right;
display: block
}
.topnav.responsive {
position: relative
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0
}
.topnav.responsive a {
float: none;
display: block;
text-align: left
}
}
答案 0 :(得分：2)
编辑：
当您需要调整大小为<img>的自适应背景图像时，我想到了一个技巧。这不是很合适，因为图像需要加载两次，但是可以正常工作。
您可以在this pen中看到它。
为了实现这一目标，我使用了一个容器div，并将其图像作为背景（就像您所做的那样），小时候给了它相同的图像（<img>和display: block）。最后，我用visibility: hidden;隐藏了该图像，请不要从流中删除该图像。因此，父div确实具有可以环绕并调整为图像大小的内容，即使它不可见。
Edit 2 ：对于“不可见的图像”，我切换到一个placeholder.com图像，因为它只有4个字节。
HTML
<div class="smallHeader">
<img src='https://via.placeholder.com/1024x200' class='smallHeader-
image'>
</div>
CSS
.smallHeader {
width: 100%;
height: auto;
background-image: url("https://picsum.photos/id/477/1024/200");
background-size: contain;
background-repeat: no-repeat;
}
.smallHeader .smallHeader-image {
display: block;
visibility: hidden;
height: auto;
width: 100%;
}
原始帖子：
您正在使用图片作为空div的背景。
因此，您使用的值auto不能随内容调整（背景不是内容）。
您可以使用div，%，px ..等设置rem的尺寸，然后让background-size: cover属性来完成工作。 {1}}，min-content ..etc为空。如果没有内容，auto不会总是计算为零，但我仍然看不到这里的要点。
这是a pen显示的内容。
或者，您也可以直接使用图片（Auto，不使用div）并应用如下所示的CSS（例如）：
<img> W3Scools在响应图像上有一个small tuto。
注意：为防止用户轻松复制，拖动...元素，可以向其添加以下属性
img.hero-image {
width: 100%;
display: block;
height: auto;
}