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

2021年3月30日11:30:01 发表评论 920 次浏览

要自动调整图像或视频的大小以适合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>

输出如下:

如何使用CSS自动调整图像大小以适合div容器?1

在上面的示例中, 由于未使用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>

输出如下:

如何使用CSS自动调整图像大小以适合div容器?2

注意:使用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>

输出如下:

如何使用CSS自动调整图像大小以适合div容器?3

范例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>

输出如下:

如何使用CSS自动调整图像大小以适合div容器?4

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


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: