对象适合：封面未裁剪bootstrap网格内3：475％填充容器内的img

如何解决对象适合：封面未裁剪bootstrap网格内3：475％填充容器内的img

我有一个3：4的盒子，可以拍摄各种图像。此框位于引导网格中。 object-fit：cover适用于img，但似乎完全无效（似乎完全没有object-fit值适用）。图像被压缩而不是被剪切。在Firefox和Safari（尚未尝试使用Chrome）中。

有没有办法使通过引导程序调整大小的3：4盒子适合对象：封面？

.Box {
    position: relative;
    width: 100%;
    height: 100%;

    overflow: hidden;
    padding-bottom: 75%;
}

.Box img {
    position: absolute;

    padding:3px;
    margin: 0; 

    width: 100%;
    min-width: 100%;
    height: 100%; 
    min-height: 100%;

    object-fit: cover !Important; 
    object-position: 50% 50%;
}

<div class="row no-gutters">
    <div class="col-md-3">
        <div class="row no-gutters">
            <div class="col-md-12">
                <div class="Box">
                   <img src="anysize.jpg">
                </div>          
            </div>    
        </div>
    </div>
</div>

您推荐什么？谢谢！

解决方法

需要在框内设置图片，以便图片的高宽比应为3：4。

您必须执行以下操作：

*{
    box-sizing: border-box;
}
.image_box{
    position: relative;
    overflow: hidden;
    padding-top: 75%;
}
.image_box img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-4">
                <div class="image_box">
                    <img src="https://www.sammobile.com/wp-content/uploads/2019/03/keyguard_default_wallpaper_silver.png">
                </div>
            </div>
            <div class="col-4">
                <div class="image_box">
                    <img src="https://www.sammobile.com/wp-content/uploads/2019/03/keyguard_default_wallpaper_silver.png">
                </div>
            </div>
            <div class="col-4">
                <div class="image_box">
                    <img src="https://www.sammobile.com/wp-content/uploads/2019/03/keyguard_default_wallpaper_silver.png">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我希望这对您有用。

谢谢...

对象适合：封面未裁剪bootstrap网格内3：475％填充容器内的img

如何解决对象适合：封面未裁剪bootstrap网格内3：475％填充容器内的img

解决方法

相关推荐