如何使背景圖像適應屏幕尺寸？
[英]How can I make a background-image adjust to screen size?
問題描述
我創建了導航和具有背景圖像的部分，我希望它自動調整為屏幕大小，但是，它沒有正確調整，在調整瀏覽器 window 的大小時， background-image的大小幾乎保持不變。 關於如何解決這個問題的任何想法？
正常的樣子
調整瀏覽器大小時的外觀 window
“DEVOUR”標志不完全可見。 請不要介意導航，我稍后會修復它。
鏈接到 IMG - https://ctrlv.sk/mCXU
/* GENERAL */ * { box-sizing: border-box; margin: 0; padding: 0; } body { background: black; }.container { max-width: 1500px; margin: 0 auto; } img { max-width: 100%; height: auto; } /* HEADER AND NAV */ header { display: flex; justify-content: space-between; align-items: center; background: rgb(7, 7, 7); opacity: 80%; padding-left: 15em; padding-right: 12em; position: fixed; top: 0; z-index: 999; width: 100%; } header:hover, header:focus { opacity: 100%; transform:scale(1.05);; transition: 1s ease; } header:not(:hover) { opacity: 80%; transform:scale(1); transition: 1s ease; } nav ul li{ display: inline-block; }.nav-item-first { color: #da2424; text-decoration: underline; } nav ul li a { color: white; text-decoration: none; font-family: 'Londrina Solid', sans-serif; font-size: 1.7em; margin: 1em; } nav ul li a:hover { color: #da2424; text-decoration: underline; } /* FIRST SECTION */.main-section { background-image: url('../IMG/main-section-logo.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; height: 80vh; border-bottom: 1px solid rgb(15, 13, 13); border-top: 1px solid rgb(15, 13, 13); }.main-section.button-container { height: 90%; display: flex; align-items: flex-end; justify-content: center; }
<body> <main> <header> <img src="IMG/straight-back-games-logo.png" class="logo" alt="logo of straight back games studio" width=110px> <nav class="navbar"> <ul> <li><a class="nav-item-first" href="#">HOME</a></li> <li><a class="nav-item" href="#">CONTACT</a></li> <li><a class="nav-item" href="#">PRESS</a></li> <li><a class="nav-item" href="https://store.steampowered.com/app/1274570/DEVOUR/" target='_blank'>BUY DEVOUR!</a></li> </ul> </nav> </div> </header> <section class="main-section"> <div class="button-container"> <div class="container"> <div class="buttons"> <a href="#" class="btn-red">BUY NOW</a> <a href="#" class="btn-white">WATCH TRAILER</a> </div> </div> </div> </section>
4 個解決方案
解決方案1
1 2021-04-10 10:59:57
嘗試這個
img {
width: 100%;
height: auto;
}
或閱讀此頁面，可能會有用：
解決方案2
0 2021-04-10 11:24:46
用這個
img {
width: 100%;
}
小費：
.main-section {
background-image: url('../IMG/main-section-logo.jpg') no-repeat center center/cover;
height: 80vh;
border-bottom: 1px solid rgb(15, 13, 13);
border-top: 1px solid rgb(15, 13, 13);
}
使用高度根本不是一個好的選擇。 盡量避免它。
解決方案3
0 2021-04-10 11:28:16
如果您希望頁面內容具有響應性，則需要在處理頁面內容的高度/寬度時指定 %，因為添加 % 意味着大小不會是 static，而是會響應瀏覽器窗口的大小/屏幕。
在您的 CSS 中試試這個
img {
width: 100%;
}
解決方案4
0 已采納 2021-04-10 14:55:22
所以事情就是這樣......下面的代碼回答了你之前的問題，但我不相信它可以解決你的問題。
.main-section {
background: url('main-section-logo.jpg') no-repeat center bottom;
background-size: 100vw;
height: 80vh;
border-bottom: 1px solid rgb(15, 13, 13);
border-top: 1px solid rgb(15, 13, 13);
}
我相信你想要的是這個..閱讀評論..下面的完整解釋
.main-section { /* full screen background image "fire in background" */ background: url('bg-img.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; /* height of this section 100% of the viewport height */ height: 100vh; /* borders */ border-bottom: 1px solid rgb(15, 13, 13); border-top: 1px solid rgb(15, 13, 13); /* align item "container" to center of page */ display: grid; place-items: center; text-align: center; }
<.-- full screen section display grid for alignment --> <section class="main-section"> <!-- contains bg-logo and buttons container --> <div class="container"> <!-- "background image" logo only --> <img class="background-logo" src="bg-logo.png" alt=""> <!-- buttons --> <div class="buttons"> <a href="#" class="btn-red">BUY NOW</a> <a href="#" class="btn-white">WATCH TRAILER</a> </div> </div> </section>
您需要將背景圖像分成兩部分，以便您可以單獨控制它們。 使用單詞 DEVOUR 作為常規圖像，並在容器上設置最大寬度以限制寬度（你已經這樣做了，我只是將它從 1500px 更改為 1000px）然后在.main-section 上使用背景圖像，以便火是總是在吞噬這個詞的后面。
如果你想要一個工作副本，這里是我為你制作的 github repo 的鏈接，你可以下載它（我從谷歌上抓取了一張火圖像，我不擁有它）。
如何調整背景圖片以適應屏幕尺寸
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.