使圖像全寬
[英]Make image full width
問題描述
我正在嘗試將圖像放入我的 header 元素中。 當我運行 Live Server 時，圖像沒有填滿容器的整個寬度。
編輯圖片尺寸為899.875X600
這是我的CSS和HTML代碼：
* { margin: 0; padding: 0; } body { width: 100%; height: 100%; color: white; min-width: 100%; min-height: 100%; height: auto; top: 0; left: 0; position: absolute; } header { min-height: 100%; min-width: 1024px; width: auto; height: 600px; } img { max-width: 100%; max-height: 100%; }
<body> <header> <img id='backgroundImg' src="image.jpg" alt=""> </header> </body>
2 個解決方案
解決方案1
0 已采納 2021-02-16 19:33:31
我強烈建議你不要在身上塗上 position absolute。 為此使用100vh單位。 它還取決於您希望圖像如何在 header 中表現，您的問題中並不清楚。 這是你想要的嗎？
* { margin: 0; padding: 0; } body { min-height: 100vh; } header { width: 100%; height: 600px; background-color: aqua; padding: 1rem; } img { display: block; object-fit: cover; width: 100%; height: 100%; }
<body> <header> <img id='backgroundImg' src="https://source.unsplash.com/random" alt="image"> </header> </body>
解決方案2
0 2021-02-16 19:41:46
* { margin: 0; padding: 0; } body { color: white; height: calc(100vh - 4px); border:solid 2px red; z-index:5; } header { height:30vh; background: url('https://via.placeholder.com/100'); background-repeat: no-repeat; background-size: cover; }
<body> <header> </header> </body>
使我的圖像全寬
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.