文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML、CSS和Js，用于将img大小限制在一个框内，切断外部的任何东西。

问HTML、CSS和Js，用于将img大小限制在一个框内，切断外部的任何东西。
EN

Stack Overflow用户

提问于 2020-03-14 19:46:12

回答 2查看 52关注 0票数 0

我刚开始编写代码，所以请使用温和的:slight_smile：

如果我有一个导航栏在一个网页顶部，然后直接在这下面，我想要一个背景图片(为了这个实验，我将选择一个随机大小的照片从我自己的收藏)。我将使用这张图片，有点类似于脸谱如何有他们的封面照片。但我有一个非常具体的尺寸限制，我也希望随着设备尺寸的变化而改变。

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

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

这就是我所能得到的。

如果图像超过一定的宽度或高度，但也不拉伸图像(图像需要保持x，y的大小，使其不失真)，如何使图像的顶部或侧面被切断？

我现在只使用HTML，CSS和JS。

提前谢谢。期待学习。

html

css

image

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-14 19:52:19

您可以使用CSS属性对象匹配的“盖子”值。

票数 1

Stack Overflow用户

发布于 2020-03-14 19:57:38

这将帮助您理解，对象匹配将如何工作？

#main {
  width:100%;
  height:100px;
  overflow: hidden;
}
#main img {
  width:100%;
  height:100%;
  object-fit: cover;
}

<!DOCTYPE html>
<html lang="en">
<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60686686

复制

相似问题

问HTML、CSS和Js，用于将img大小限制在一个框内，切断外部的任何东西。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML、CSS和Js，用于将img大小限制在一个框内，切断外部的任何东西。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML、CSS和Js，用于将img大小限制在一个框内，切断外部的任何东西。
EN