我是代碼新手，所以要溫柔：slight_smile：如果我在網頁頂部有一個導航欄，然后在其正下方我想要一張背景圖片（對于這個實驗，我將從我自己的收藏中選擇一張隨機大小的照片）。我將使用這張圖片，類似于 Facebook 的封面照片。但我有一個非常具體的尺寸限制，我也希望它隨著設備尺寸的變化而改變。 #container { width: 90%; margin: auto;}@media screen and (max-width: 768px){#container { width: 90%;}據我所知。如果圖像超過一定的寬度或高度，但又不拉伸圖像（圖像需要保持其 x、y 尺寸，以便不會扭曲），如何使圖像剪掉其頂部或側面？我目前只使用 HTML、CSS 和 JS。提前致謝。期待學習。
2 回答
MM們
TA貢獻1886條經驗 獲得超2個贊
這將幫助您理解對象擬合如何工作？
#main {
width:100%;
height:100px;
overflow: hidden;
}
#main img {
width:100%;
height:100%;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="main">
<img src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg" alt="alttext">
</div>
</body>
</html>
- 2 回答
- 0 關注
- 124 瀏覽
添加回答
舉報
0/150
提交
取消