試圖讓我的影像隨著頁面大小而縮小。嘗試了幾件事，要么它不起作用，要么它決定適合我擁有的另一個與這個無關的 div
.top-page-image {
position: relative;
top: -8px;
left: -8px;
background-image: url(basictop.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
opacity: 0.8;
max-width: 100%;
}
和 HTML
<div class="top-page-image"></div>
uj5u.com熱心網友回復：
無論視口的縱橫比如何，要使整個影像始終可見，請使用包含而不是覆寫作為背景大小。
還將 background-repeat 設定為 no-repeat，您可能希望確保它居中。
如果視口的縱橫比與影像的縱橫比不同，您將不可避免地在側面或頂部/底部留有空間。
.top-page-image {
position: relative;
top: -8px;
left: -8px;
background-image: url(https://picsum.photos/id/1015/200/300);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
width: 100vw;
opacity: 0.8;
max-width: 100%;
}<div class="top-page-image"></div>uj5u.com熱心網友回復：
這和你想要的一樣。如果不是這樣，您將不會嘗試通過在文本編輯器中使用 code 屬性來清楚地描述您的問題
.top-page-image {
position: relative;
top: -8px;
left: -8px;
background-image: url(https://cdn.dribbble.com/uploads/601/original/ff7474bc9245e3ac5a25cff4f39b2707.png?1544835635);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
opacity: 0.8;
max-width: 100%;
}<div class="top-page-image"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/412192.html
標籤：
下一篇：Vue3動態影像