Подгонка изображения в сетке

#html #css #image

#HTML #css — код #изображение

Вопрос:

Я новичок в «программировании» и прошу помощи здесь, в stackoverflow.

У меня возникла небольшая проблема с попыткой поместить изображение в мою сетку.

Например, когда у меня есть изображение определенного размера, это работает, но когда у меня есть изображение немного большего размера или в другом формате (16: 9 вместо 9: 16), оно показывает изображение не в полном размере, но не обрезает его, чтобы оно соответствовало сетке.

Чего я хочу

Что я получаю

Я использую один и тот же HTML-код и CSS для обеих сеток, единственное, что меняется, — это изображение. Я использую Bootstrap с некоторым количеством CSS.

CSS

 .grid {
position: relative;
clear: both;
margin: 0 auto;
max-width: 1000px;

list-style: none;
text-align: center;
}

.grid figure {
position: relative; 
overflow: hidden;
margin: 10px 0;
height: auto;
text-align: center;
cursor: pointer;
}

.grid figure img {
position: relative;
display: block;
min-height: 100%;
width: 100%;
opacity: 0.8;
}

 <div class="gallery">
    <div class="container">
        <div class="gallery-grids">

            <div class="col-md-4 gallery-grid">
                <div class="grid">
                    <figure  class="effect-roxy">
                        <a  class="example-image-link" href="/images/fotos/gal1.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">
                            <img src="/images/fotos/gal1.jpg" alt="" />
                            <figcaption>
                                <h3>Maecenas <span>lacus</span></h3>
                                <p> Aenean fermentum nisl ac imperdiet commodo</p>
                            </figcaption>   
                        </a>
                    </figure>
                </div>
            </div>
    
            
            <div class="clearfix"> </div>
        </div>
    </div>
</div>

Развернуть фрагмент

1. Используете ли вы Bootstrap?

2. Я использую bootstrap, но с некоторыми изменениями, поэтому все может не работать

3. Похоже, вы используете bootstrap? Кроме того, не могли бы вы добавить немного больше HTML. Это помогло бы увидеть, что вы делаете. Спасибо!

4. Обновлен код с полным div

5. Изображения отсутствуют во фрагменте.

Ответ №1:

Я полагаю, что у вас есть 2 варианта, один из которых — добавить изображения в качестве фона и использовать обложку, или, если изображения взяты из тега img, тогда используйте

 img {
    object-fit: cover;
    object-position: center;
}

Обратите внимание, это не работает в старой версии ie

1. это не сработало, все еще есть изображение с тем же размером

2. попробуйте установить максимальную высоту, возможно, совместное использование чего-то вроде jsfiddle может очень помочь

3. в нем нет всей информации, поэтому это очень плохо, но, по крайней мере, у вас есть код jsfiddle.net/kc82hr7j

Ответ №2:

Вы можете попробовать создать класс обрезки в CSS следующим образом

 div.trim {
max-height:292.2px;
max-width: 350px;
overflow: hidden;

}

затем добавьте новый элемент из div изображения, чтобы заблокировать его

 <div class="gallery">
    <div class="container">
        <div class="gallery-grids">
            
            <div class="col-md-4 gallery-grid">
                <div class="grid">
                        <figure  class="effect-roxy">
                            <div class="trim" >
                            <a class="example-image-link" href="{$product.image}" data-lightbox="example-set" data-title="">
                                <img src="{$product.image}" alt="" />
                                <!--<figcaption>
                                    <h3>Maecenas <span>lacus</span></h3>
                                    <p> Aenean fermentum nisl ac imperdiet commodo</p>-->
                                </figcaption>
                            </a></div>
                        </figure>
                    
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
</div>