HTML、CSS 和 Js 用于将图像大小限制在一个盒子内，切断外部的任何内容
我是代码新手，所以要温柔：slight_smile：
如果我在网页顶部有一个导航栏，然后在其正下方我想要一张背景图片（对于这个实验，我将从我自己的收藏中选择一张随机大小的照片）。我将使用这张图片，类似于 Facebook 的封面照片。但我有一个非常具体的尺寸限制，我也希望它随着设备尺寸的变化而改变。
#container {
width: 90%;
margin: auto;
}
@media screen and (max-width: 768px){
#container {
width: 90%;
}
据我所知。
如果图像超过一定的宽度或高度，但又不拉伸图像（图像需要保持其 x、y 尺寸，以便不会扭曲），如何使图像剪掉其顶部或侧面？
我目前只使用 HTML、CSS 和 JS。
提前致谢。期待学习。
冉冉说浏览 84回答 2
2回答
-
缥缈止盈
您可以将 CSS 属性object-fit与“cover”值一起使用。 -
MM们
这将帮助您理解对象拟合如何工作？#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>
随时随地看视频慕课网APP
相关分类
Html5