如何使用CSS自动调整图像大小以适合div容器（） _floor_divide

要自动调整图像或视频的大小以适合div容器, 请使用object-fit属性。它用于指定图像或视频在容器中的放置方式。
【如何使用CSS自动调整图像大小以适合div容器（）】对象适合属性：此属性用于指定图像或视频如何调整容器大小并适合容器。它告诉内容如何以各种方式放入特定的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>

输出如下：

注意：物业适合对象：封面；将剪切图像的侧面, 保留长宽比, 并填充空间。