портретные изображения отображаются неправильно - слишком высокий - PullRequest
Новая
       8

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

1 голос
/ 27 апреля 2019

У меня есть несколько динамических галерей лайтбоксов на моем сайте (это для обновления нашего текущего сайта и еще не запущено).Все работает, но по какой-то причине, и я не могу понять, почему мои портретные изображения получаются очень высокими по сравнению с другими изображениями в галереях.Это, кажется, намного хуже, очень узкие изображения.Любая помощь с этим была бы очень признательна.

Я пытался жестко указать высоту и ширину и попытался создать специальный класс в CSS.Ничто из того, что я пробовал, не сработало.Я использую лайтбокс2 от Локеш Дакар.Я связался с ним по этому вопросу, и он заявил, что это было сделано в css, и предложил мне опубликовать здесь что-нибудь для помощи.У меня есть скриншоты того, что я считаю приемлемым портретным изображением и недопустимым портретным изображением.

Вот основной HTML-код для раздела, который я описываю: 

<div class="gallery1">

<a href="Halloween On The Farm 10-19-08/Photo10.jpg" data-lightbox="halloween1" data-title="5th Grade Volunteers"> <img src="Halloween On The Farm 10-19-08/Photo10.jpg" alt="5th Grade Volunteers" width="185" height="155"></a>

<a href="Halloween On The Farm 10-19-08/Photo11.jpg" data-lightbox="halloween1" data-title="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"> <img src="Halloween On The Farm 10-19-08/Thumbnails/Thumb11.jpg" alt="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"></a>

<a href="Halloween On The Farm 10-19-08/Photo12.jpg" data-lightbox="halloween1" data-title="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"> <img src="Halloween On The Farm 10-19-08/Thumbnails/Thumb12.jpg" alt="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"></a>

вот CSS:

.gallery1 {
    display: block;
    border-radius: 25px 25px 25px 25px;
    padding: 10px;

}

.gallery1 img {

    border-radius: 25px 25px 25px 25px;
    padding: 15px;
    width: 200px;
    transition: 1.0s;
    cursor: pointer;
}

.gallery1 img:hover
{

     transform: scale(1.1);
}

Ожидаемые результаты состоят в том, что изображения будут отображаться правильно и не намного больше, чем предполагалось.Пока что мои реальные результаты не увенчались успехом.

1 Ответ

0 голосов
/ 27 апреля 2019

Это должно сделать работу (это то же самое, что background-size: contain только для изображений вместо background-images): 

.gallery1 {
    object-fit: contain;
}

Редактировать: вопрос был неясен относительно желаемого результата.
Фактический случай был решен путем установки высоты для самих изображений: 

.gallery1 {
    display: block;
    width: 100%;
    border-radius: 25px 25px 25px 25px;
    padding: 10px;
}

.gallery1 img {
    border-radius: 25px 25px 25px 25px;
    padding: 15px;
    max-width: 100%;
    height: 200px; /* max-height: 200px; */
    transition: 1.0s;
    cursor: pointer;
}
...