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