javascript - HTML、CSS 和 Js 用于将图像大小限制在一个盒子内，切断外部的任何内容

Question

我是代码新手，所以要温柔一点:slight_smile:

如果我在网页顶部有一个导航栏，然后在其正下方我想要一张背景图片(对于这个实验，我将从我自己的收藏中选择一张随机大小的照片)。我将使用这张图片，类似于 Facebook 的封面照片。但我有一个非常具体的大小限制，我也希望它随设备大小而改变。

     #container {
  width: 90%;
  margin: auto;
}

@media screen and (max-width: 768px){
#container {
  width: 90%;
}

这就是我所能得到的。

如果图像超过一定的宽度或高度，但又不拉伸(stretch)图像(图像需要保持其 x、y 尺寸，以便不会扭曲)，如何使图像剪掉其顶部或侧面？

我目前只使用 HTML、CSS 和 JS。

提前致谢。期待学习。

Answer 1

您可以使用 CSS 属性 object-fit与“覆盖”值。