我是代码新手，所以要温柔：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 关注
- 54 浏览
添加回答
举报
0/150
提交
取消