要自动调整图像或视频的大小以适合div容器, 请使用object-fit属性。它用于指定图像或视频在容器中的放置方式。
对象适合属性：此属性用于指定图像或视频如何调整容器大小并适合容器。它告诉内容如何以各种方式放入特定的div容器中, 例如保留该长宽比或拉伸并占用尽可能多的空间。
范例1：
本示例描述了适合div容器的自动调整大小的图像。本示例不包含对象适合属性。
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
width:60%;
height:300px;
}
img {
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class = "geeks">
<img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-25.png"
alt = "Geeks Image" />
</div>
</body>
</html>输出如下：
在上面的示例中, 由于未使用object-fit属性, 因此将图像压缩以适合容器, 并且破坏了其原始纵横比。
范例2：
当调整div容器的大小时, 此示例用于显示图像的一部分。
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
width:60%;
height:300px;
}
img {
width:100%;
height:100%;
object-fit:cover;
}
</style>
</head>
<body>
<div class = "geeks">
<img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-25.png"
alt = "Geeks Image" />
</div>
</body>
</html>输出如下：
注意:使用object-fit:cover;将图像的边沿切断，保留长宽比，同时填充空间。
范例3：
本示例在不使用对象适合属性的情况下显示图像。在此示例中, 图像的大小是手动设置的, 并且在调整浏览器窗口大小时, 该图像将无法维持其宽高比, 无法根据div容器进行调整或调整大小。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align:center;
}
img {
width:400px;
height:200px;
}
</style>
</head>
<body>
<img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-25.png"
alt = "Geeks Image">
</body>
</html>输出如下：
范例4：
本示例使用object-fit属性显示图像或图像的一部分。在此示例中, 图像的大小是手动设置的, 并且还使用了对象适合属性。在这种情况下, 在调整浏览器大小时, 图像将保持其宽高比, 并且不会根据div容器进行调整。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align:center;
}
img {
width:400px;
height:200px;
object-fit: cover;
}
</style>
</head>
<body>
<img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-25.png"
alt = "Geeks Image">
</body>
</html>输出如下：
注意：物业适合对象：封面；将剪切图像的侧面, 保留长宽比, 并填充空间。
