Создание галереи миниатюр с текстом под обрезанными и центрированными изображениями

Question

Я пытаюсь создать простую галерею миниатюр, под каждым изображением есть текст. Однако, поскольку изображения, с которыми я имею дело, имеют разные размеры, я решил обрезать и центрировать каждое изображение в галерее. Я действительно сделал это, следуя инструкциям, приведенным здесь:

https://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/

Однако тексты изображений появляются на изображении. Я не мог найти способ переместить текст ниже. Я попытался добавить отступы внизу, но padding-bottom не работает. Я подозреваю, что это из-за линии height: auto. Каким-то образом этот параметр не позволяет мне настраивать отступ в вертикальном направлении.

Мой html:

<div class="gallery">
    <img src="https://placehold.it/900x500" alt="">
    <div class="desc">My Text</div>
</div>
<div class="gallery">
    <img src="https://placehold.it/500x900" class="portrait" alt="">
    <div class="desc">My long long text</div>
</div>

Стили:

.gallery {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin-top: 5vh;
    margin-right: 0.5vh;
    border: 1px solid #ccc;
    float: left;
}

.gallery img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.gallery img.portrait {
    width: 100%;
    height: auto;
}

.desc {
    display: block;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

jssfiddle:

https://jsfiddle.net/8ue603on/

Спасибо!

Answer 1

Я думаю, что лучшим решением для вас будет использование подгонки объекта для изображения https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

.gallery img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

https://jsfiddle.net/csscoder/wymLkq16/3/

Answer 2

1. Установите max-height для изображений, это будет выглядеть чище, чем установка max-width.

2. Вы должны рассмотреть все основные аспекты CSS потому что тогда вы будете знать о object-fit, с которым вы можете поэкспериментировать в MDN .

3. Если у вас различная длина текста, вы не можете выбрать количество персонажам не хватает возиться с JavaScript, хотя вам это не нужно. Поместите текст внутри элемента span и установите его на display: block, чтобы у вас были только img и span внутри родительского элемента, а текст появился под изображением. Вы можете получить многоточие из-за переполнения текста.

4. Никогда не помещайте текст непосредственно внутри div - они являются элементами уровня блока. Да, технически вы можете сойти с рук, хотя, когда вы достигнете очень высокого уровня навыков, вы обнаружите, что строгие правила работы с кодом принесут большую пользу и ускорят ваши проекты.