CSS background-image 角色脸在屏幕变大后被截断
For CSS background-image character face got cut off once the screen getting bigger
https://codepen.io/demi-chen/pen/vYLPQyv
对于CSS background-image 角色脸在屏幕变大后被截断了如何确保屏幕至少显示完整的脸。我试图调整背景位置，但它似乎不起作用。谢谢
for the background-image parts
.hero {
background-image: url(https://upload.cc/i1/2020/08/16/BZimrY.jpg);
background-repeat: no-repeat;
background-size:cover ;
color:#fff;
padding: 4em 0;
background-position: bottom;
}
您可以直接指定一个max-width，之后它应该停止扩展，因为图像中的脸正在消失。所以它可以完成为 -
const closeNav = document.querySelector(".close-nav")
const getNav= document.querySelector(".nav")
const openNav = document.querySelector(".closetag")
closeNav.addEventListener ("click", function() {
getNav.classList.remove('navigation-open');
});
openNav.addEventListener("click",function(){
getNav.classList.add('navigation-open')
})
* {box-sizing: border-box;}
body {
margin:0;
font-family: 'Montserrat',sans-serif;
font-size:1rem;
color:#404040;
line-height:1.6
}
h1, h2, strong {
font-weight: 700;
}
.hero {
background-image: url(https://upload.cc/i1/2020/08/16/BZimrY.jpg);
background-repeat: no-repeat;
background-size:cover ;
color:#fff;
max-width: 1250px;
margin: auto;
padding: 4em 0;
background-position: bottom;
}
.accent-color {
color:#ffe600
}
.hero-title {
font-size:1.5rem;
line-height:1.4;
margin-bottom:0;
margin-top: 5rem;
}
.hero > * {
grid-column:2/-2
}
@media (min-width:600px) {
.hero > * {
grid-column:2/ span 2
}
}
.btn-primary {
background-color: #ffe600;
color:black;
text-decoration:none;
justify-self:start;
align-self: center;
}
.btn {
padding:0.5em 1.5em;
margin-top:0.5em;
font-weight:700;
}
/* =================
general layout
====================*/
.main-grid {
display: grid;
grid-template-columns: minmax(1em,1fr) minmax(0px,500px) minmax(1em,1fr);
grid-gap: 0em 2em
}
@media (min-width: 600px){
.main-grid {
grid-template-columns: minmax(1em,1fr) repeat(3,minmax(130px,320px)) minmax(1em,1fr)
}
}
/* =================
info section
==================*/
.info >* {
grid-column:2/-2
}
.info {
padding: 4em 0;
}
.info > h3 {
text-align:center
}
@media (min-width: 600px) {
.col {
grid-column: span 1;
}
.col:first-child {
grid-column:2/3
}
}
/* =================
footer section
==================*/
.footer >* {
grid-column:2/-2
}
.social-item {
list-style-type: none;
}
.footer {
background-color: #ebebeb;
text-align:center;
padding: 1.5em;
}
ul.social-list {
order:-1;
padding:0;
margin:0;
display:flex;
justify-content: center;
letter-spacing:1em;
font-size:1.5rem;
}
.social-link {
color:black;
}
.social-link:hover,
.social-focuse{
color: #777
}
.fa-facebook-square {
margin-left:20px
}
.footer-main > * {
opacity: 0.6
}
@media (min-width: 600px) {
.footer-main {
grid-column: 1 / 4;
text-align:start;
margin-left: 2em;
}
.social-list{
grid-column: 4 / 6 ;
grid-row: 1 / 3 ;
justify-self: end;
align-self: center;
}
}
.logo-link {
background-color: yellow;
padding-top: 2em;
}
.nav-list {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
.nav-link {
color:white;
text-decoration:none;
font-size: 2rem;
font-weight:700;
letter-spacing:1px;
}
.header-content {
display: flex;
grid-column: 2/-2;
}
header.main-grid {
position: absolute;
width: 100vw;
}
.nav {
position:fixed;
background-color: #000;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom 0;
height: 100%;
left: 100%;
transform: translateX(0%);
transition: 0.5s
}
.navigation-open {
transform: translateX(-100%);
}
.nav-link:hover,
.nav-link:focus {
color: yellow
}
.close-nav {
background-color: #000;
border:0;
color:yellow;
font-size:3rem;
cursor:pointer;
padding: .5em;
position: absolute;
}
.fas {
font-size:2.5em;
color:white;
}
.closetag {
position: absolute;
right:1%;
top:20%;
background-color: #000;
border:0;
cursor: pointer;
padding: .3em 1.5em;
background-color: TRANSPARENT;
}
.close-nav:hover {
color: white
}
.close-nav:focus,
.closetag:focus {
outline: none;
}
.fas:hover {
color:yellow
}
@media (min-width:600px) {
button.closetag,
.close-nav {
display: none;
}
.nav {
background-color: transparent;
position: initial;
}
.nav-list {
flex-direction: row;
justify-content: unset;
}
.nav-link {
font-size:1.4rem;
margin-left: 18px;
}
.header-content {
align-items: center;
}
}
<html>
<body>
<header class="main-grid">
<div class="header-content">
<button class="closetag"><i class="fas fa-bars"></i></button>
<a class="logo-link" href="index.html">
<img src="https://upload.cc/i1/2020/08/16/IS7eGa.png"alt="">
</a>
<nav class="nav">
<button aria-label= "Close navigation" class="close-nav">×</button>
<ul class="nav-list">
<li class="nav-item"><a href="https://cdpn.io/demi-chen/debug/LYNLrGx/YvkgOeEPvgEk" class="nav-link">home</a></li>
<li class="nav-item"><a href="https://cdpn.io/demi-chen/debug/LYNLrGx/YvkgOeEPvgEk" class="nav-link">about us</a></li>
<li class="nav-item"><a href="#" class="nav-link">contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero main-grid">
<h1 class="hero-title">The only marketing agency on <span class="accent-color"> a mission from God </span>, fully dedicated to increase your web traffic.</h1>
<p class="subtitle">We’re two brothers from Chicago that are trying to pay back our debt. We can help you with <strong>SEO, SEM, content marketing</strong> and whatever else.</p>
<a href="#" class="btn btn-primary"> contact us </a>
</section>
<section class="info main-grid">
<div class="col">
<h3>About Us</h3>
<p>We grew up in downtown Chicago, and we used to play in a band. <strong>Jake loves fried chicken, and Elwood loves dry white toast.</strong></p>
</div>
<div class="col">
<h3>Our skills</h3>
<p>Elwood is an expert in<strong> SEO, SEM, and driving from the police</strong>. Jake is our <strong>social media specialist</strong>, and he has an amazing voice.</p>
</div>
<div class= "col">
<h3>Get in touch</h3>
<p>Send us an email with some info about what help you need and <strong>we’ll drive over to your place</strong> in our Bluesmobile the following day to discuss the deal.</p>
</div>
</section>
</main>
<footer class="footer main-grid">
<div class="footer-main">
<h3>Jake&Elwood</h3>
<p>Two brothers from Chicago that are just trying to pay back their debt by helping others with their SEO, SEM, and Content Marketing needs.</p>
<p>© Jake&Elwood 2019</p>
</div>
<ul class="social-list">
<li class="social-item"><a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a></li>
<li class="social-item"><a href="#" class="social-link"><i class="fab fa-twitter"></i></a></li>
<li class="social-item"><a href="#" class="social-link"><i class="fab fa-instagram"></i></a></li>
</ul>
</footer>
</body>
</html>
max-width 将确保图像的正面不会超出图像，margin:auto; 将确保图像保持在中间。
https://codepen.io/demi-chen/pen/vYLPQyv
对于CSS background-image 角色脸在屏幕变大后被截断了如何确保屏幕至少显示完整的脸。我试图调整背景位置，但它似乎不起作用。谢谢
for the background-image parts
.hero {
background-image: url(https://upload.cc/i1/2020/08/16/BZimrY.jpg);
background-repeat: no-repeat;
background-size:cover ;
color:#fff;
padding: 4em 0;
background-position: bottom;
}
您可以直接指定一个max-width，之后它应该停止扩展，因为图像中的脸正在消失。所以它可以完成为 -
const closeNav = document.querySelector(".close-nav")
const getNav= document.querySelector(".nav")
const openNav = document.querySelector(".closetag")
closeNav.addEventListener ("click", function() {
getNav.classList.remove('navigation-open');
});
openNav.addEventListener("click",function(){
getNav.classList.add('navigation-open')
})
* {box-sizing: border-box;}
body {
margin:0;
font-family: 'Montserrat',sans-serif;
font-size:1rem;
color:#404040;
line-height:1.6
}
h1, h2, strong {
font-weight: 700;
}
.hero {
background-image: url(https://upload.cc/i1/2020/08/16/BZimrY.jpg);
background-repeat: no-repeat;
background-size:cover ;
color:#fff;
max-width: 1250px;
margin: auto;
padding: 4em 0;
background-position: bottom;
}
.accent-color {
color:#ffe600
}
.hero-title {
font-size:1.5rem;
line-height:1.4;
margin-bottom:0;
margin-top: 5rem;
}
.hero > * {
grid-column:2/-2
}
@media (min-width:600px) {
.hero > * {
grid-column:2/ span 2
}
}
.btn-primary {
background-color: #ffe600;
color:black;
text-decoration:none;
justify-self:start;
align-self: center;
}
.btn {
padding:0.5em 1.5em;
margin-top:0.5em;
font-weight:700;
}
/* =================
general layout
====================*/
.main-grid {
display: grid;
grid-template-columns: minmax(1em,1fr) minmax(0px,500px) minmax(1em,1fr);
grid-gap: 0em 2em
}
@media (min-width: 600px){
.main-grid {
grid-template-columns: minmax(1em,1fr) repeat(3,minmax(130px,320px)) minmax(1em,1fr)
}
}
/* =================
info section
==================*/
.info >* {
grid-column:2/-2
}
.info {
padding: 4em 0;
}
.info > h3 {
text-align:center
}
@media (min-width: 600px) {
.col {
grid-column: span 1;
}
.col:first-child {
grid-column:2/3
}
}
/* =================
footer section
==================*/
.footer >* {
grid-column:2/-2
}
.social-item {
list-style-type: none;
}
.footer {
background-color: #ebebeb;
text-align:center;
padding: 1.5em;
}
ul.social-list {
order:-1;
padding:0;
margin:0;
display:flex;
justify-content: center;
letter-spacing:1em;
font-size:1.5rem;
}
.social-link {
color:black;
}
.social-link:hover,
.social-focuse{
color: #777
}
.fa-facebook-square {
margin-left:20px
}
.footer-main > * {
opacity: 0.6
}
@media (min-width: 600px) {
.footer-main {
grid-column: 1 / 4;
text-align:start;
margin-left: 2em;
}
.social-list{
grid-column: 4 / 6 ;
grid-row: 1 / 3 ;
justify-self: end;
align-self: center;
}
}
.logo-link {
background-color: yellow;
padding-top: 2em;
}
.nav-list {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
.nav-link {
color:white;
text-decoration:none;
font-size: 2rem;
font-weight:700;
letter-spacing:1px;
}
.header-content {
display: flex;
grid-column: 2/-2;
}
header.main-grid {
position: absolute;
width: 100vw;
}
.nav {
position:fixed;
background-color: #000;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom 0;
height: 100%;
left: 100%;
transform: translateX(0%);
transition: 0.5s
}
.navigation-open {
transform: translateX(-100%);
}
.nav-link:hover,
.nav-link:focus {
color: yellow
}
.close-nav {
background-color: #000;
border:0;
color:yellow;
font-size:3rem;
cursor:pointer;
padding: .5em;
position: absolute;
}
.fas {
font-size:2.5em;
color:white;
}
.closetag {
position: absolute;
right:1%;
top:20%;
background-color: #000;
border:0;
cursor: pointer;
padding: .3em 1.5em;
background-color: TRANSPARENT;
}
.close-nav:hover {
color: white
}
.close-nav:focus,
.closetag:focus {
outline: none;
}
.fas:hover {
color:yellow
}
@media (min-width:600px) {
button.closetag,
.close-nav {
display: none;
}
.nav {
background-color: transparent;
position: initial;
}
.nav-list {
flex-direction: row;
justify-content: unset;
}
.nav-link {
font-size:1.4rem;
margin-left: 18px;
}
.header-content {
align-items: center;
}
}
<html>
<body>
<header class="main-grid">
<div class="header-content">
<button class="closetag"><i class="fas fa-bars"></i></button>
<a class="logo-link" href="index.html">
<img src="https://upload.cc/i1/2020/08/16/IS7eGa.png"alt="">
</a>
<nav class="nav">
<button aria-label= "Close navigation" class="close-nav">×</button>
<ul class="nav-list">
<li class="nav-item"><a href="https://cdpn.io/demi-chen/debug/LYNLrGx/YvkgOeEPvgEk" class="nav-link">home</a></li>
<li class="nav-item"><a href="https://cdpn.io/demi-chen/debug/LYNLrGx/YvkgOeEPvgEk" class="nav-link">about us</a></li>
<li class="nav-item"><a href="#" class="nav-link">contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero main-grid">
<h1 class="hero-title">The only marketing agency on <span class="accent-color"> a mission from God </span>, fully dedicated to increase your web traffic.</h1>
<p class="subtitle">We’re two brothers from Chicago that are trying to pay back our debt. We can help you with <strong>SEO, SEM, content marketing</strong> and whatever else.</p>
<a href="#" class="btn btn-primary"> contact us </a>
</section>
<section class="info main-grid">
<div class="col">
<h3>About Us</h3>
<p>We grew up in downtown Chicago, and we used to play in a band. <strong>Jake loves fried chicken, and Elwood loves dry white toast.</strong></p>
</div>
<div class="col">
<h3>Our skills</h3>
<p>Elwood is an expert in<strong> SEO, SEM, and driving from the police</strong>. Jake is our <strong>social media specialist</strong>, and he has an amazing voice.</p>
</div>
<div class= "col">
<h3>Get in touch</h3>
<p>Send us an email with some info about what help you need and <strong>we’ll drive over to your place</strong> in our Bluesmobile the following day to discuss the deal.</p>
</div>
</section>
</main>
<footer class="footer main-grid">
<div class="footer-main">
<h3>Jake&Elwood</h3>
<p>Two brothers from Chicago that are just trying to pay back their debt by helping others with their SEO, SEM, and Content Marketing needs.</p>
<p>© Jake&Elwood 2019</p>
</div>
<ul class="social-list">
<li class="social-item"><a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a></li>
<li class="social-item"><a href="#" class="social-link"><i class="fab fa-twitter"></i></a></li>
<li class="social-item"><a href="#" class="social-link"><i class="fab fa-instagram"></i></a></li>
</ul>
</footer>
</body>
</html>
max-width 将确保图像的正面不会超出图像，margin:auto; 将确保图像保持在中间。