Блог

Главная - Вопросы по программированию - Подгонка объекта: обложка не обрезает изображение внутри контейнера 3: 4 (75% заполнения) внутри сетки начальной загрузки

Подгонка объекта: обложка не обрезает изображение внутри контейнера 3: 4 (75% заполнения) внутри сетки начальной загрузки

#bootstrap-4

#начальная загрузка-4

Вопрос:

У меня есть коробка 3: 4, которая принимает всевозможные изображения. Это поле находится в сетке начальной загрузки. подгонка объекта: обложка применяется к изображению, но, похоже, не имеет абсолютно никакого эффекта (значение подгонки объекта, похоже, вообще не применяется). Изображения сжимаются вместо обрезки. В Firefox и Safari (не пробовал Chrome).

Есть ли способ создать поле 3: 4, размер которого изменяется с помощью bootstrap take object-fit: cover?

 .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>

Что вы рекомендуете?
Спасибо!

Ответ №1:

Вам нужно установить изображение внутри коробки так, чтобы соотношение высоты и ширины изображения было 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>

Комментарии:

1. Можете ли вы указать, чем то, что у вас есть, отличается от того, что есть у меня? Мне кажется идентичным?

2. Можете ли вы подтвердить, что это работает для вас? В Firefox и Safari подгонка объекта: обложка не применяется. Спасибо!