这里是网站菜鸟，请对我宽容点。
我目前正在为我自愿工作的视频游戏开发一个响应式网站。现在，该网站的大部分内容都非常敏感，但我还遇到了一个障碍，而且我似乎无法弄清楚这一点。
Logo 和背景位于页面顶部的英雄图像无法正确调整大小。它似乎是根据高度而不是宽度来调整大小，这是一个问题，因为在移动设备上，它似乎严重削减了 Logo 的两侧。
下面是主页的 HTML 以及整个网站的 CSS。我省略了“@font-face”的 CSS，因为代码太长，无法包含在此处。
由于我是网站开发方面的大菜鸟，而且我一直在尽力学习新东西，所以我还没有真正能够尝试很多不同的东西。我涉足了 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
}
}
最佳答案
编辑:
因为您想要一个响应式背景图像，其大小调整为 <img> ，我想出了一个窍门。这不是很合适，因为图像需要加载两次，但它可以工作。
您可以在 this pen 中看到它.
为了实现这一点，我使用了一个容器 div以图像作为背景(就像你一样)，小时候我给了它相同的图像( <img> 和 display: block )。最后我用visibility: hidden;隐藏这张图片不会从流程中删除此图像。所以家长div确实有内容可以环绕并调整图像大小，即使它不可见。
编辑 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属性(property)做它的工作..但不是 min-content , auto ..等，因为它是空的。 Auto如果没有内容，则不会总是计算为零，但我仍然不明白这里的要点。
这是a pen显示此内容。
或者，您也可以直接使用图像( <img> ，不带 div)并应用一些像这样的 css (例如):
img.hero-image {
width: 100%;
display: block;
height: auto;
}
W3Scools 有一个 small tuto在响应式图像上。
注意:为了防止用户轻松复制、拖动...元素，您可以向其添加以下属性
oncopy="return false;" oncut="return false;" onpaste="return false;" ondrop="return false;" ondragstart="return false;" onclick="return false;" oncontextmenu="return false;"
关于html - 如何使英雄图像正确调整宽度大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57349315/