数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 CSS 将 <img> 或 <video> 调整大小以适应其容器？
在网站上添加图片的目的是为了提高其视觉吸引力和用户吸引力。但是，如果我们无法控制网站上图片的大小，它们就不会那么吸引人。幸运的是，CSS 使更改图片大小变得非常简单。
可以使用多种方法更改 CSS 图片大小。首先，让我们检查一下在 CSS 中更改图片大小为何重要。如果图片大小没有限制，它将填充其大小的每个像素。但是，每个图片都应该适合其放置的容器内。这在构建响应式网站时尤其重要。
CSS object-fit 属性
可以使用CSS object-fit 属性将图片或视频缩放以适应其内容框。此属性以多种方式指定如何填充内容框或容器中的内容，例如保持纵横比或通过扩展和向上提升尽可能多地填充空间等。object-position 属性允许您修改替换元素的内容对象在其元素框内的对齐位置。
语法
以下是 object-fit 属性的语法：
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
示例
让我们看下面的示例，我们将在这里使用 CSS object-fit 属性以及 fill 值。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
background-color: #D5F5E3;
text-align: center;
}
#tp {
width: 400px;
height: 200px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>CSS object-fit property with fill value</h2>
<img id="tp" src="https://tutorialspoint.com/cg/images/logo.png">
</body>
</html>
当我们运行上述代码时，它将生成一个输出，其中包含网页上显示的图片和文本。
示例
考虑另一种情况，我们将在这里使用 CSS object-fit 属性以及 contain 值。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
font-size: 15px;
color: #DE3163;
background-color: #F4ECF7;
text-align: center;
}
#tp {
width: 500px;
height: 450px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>CSS object-fit property with contain value</h2>
<img id="tp" src="https://tutorialspoint.com/cg/images/logo.png">
</body>
</html>
运行上述代码后，输出窗口将弹出，在网页上显示图片和文本。
示例
在下面的示例中，我们将使用 CSS object-fit 属性以及 cover 值。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
background-color: #D6EAF8;
text-align: center;
}
#tp {
width: 300px;
height: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>CSS object-fit property with cover value</h2>
<br>
<br>
<br>
<img id="tp" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Dhoni_behind_Stumps.jpg/330px-Dhoni_behind_Stumps.jpg">
</body>
</html>
当我们运行上述代码时，它将生成一个输出，其中包含网页上显示的图片和文本。
更新于： 2024年1月8日
169 次查看
广告