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

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

Я попытался жестко закодировать высоту и ширину и попытался создать специальный класс в css. Ничто из того, что я пробовал, не сработало. Я использую лайтбокс2 от Lokesh Dhakar. Я связался с ним по этой проблеме, и он сказал, что это проблема 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);
}

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


css lightbox2
person Nate    schedule 27.04.2019    source источник
comment
Посмотрите как создать минимальный, полный и проверяемый пример.   -  person Andy Hoffman    schedule 27.04.2019
comment
Энди, я думаю, мне неясно, что не было полным, минимальным или поддающимся проверке в моем сообщении. Я включил только те части, где возникла проблема, в один небольшой раздел html, и я включил только ту часть CSS, которая была частью галереи. Стесняюсь выкладывать свои скрины, которые не видел где делать, не слежу.   -  person Nate    schedule 27.04.2019
comment
Пожалуйста, взгляните на это   -  person Andy Hoffman    schedule 27.04.2019
comment
Энди, в следующий раз я постараюсь сделать работу лучше. Пожалуйста, будьте терпеливы, так как я здесь новый постер и все еще учусь. Спасибо за совет.   -  person Nate    schedule 27.04.2019
comment
Конечно — я все понимаю. Если я в какой-то момент и разозлился, то уж точно не собирался этого делать.   -  person Andy Hoffman    schedule 27.04.2019
comment
То же самое для меня, Энди. Спокойной ночи и спасибо, что помогаете мне делать все правильно.   -  person Nate    schedule 27.04.2019

Ответы (1)


arrow_upward
0
arrow_downward

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

.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;
}
person Andu Andrici    schedule 27.04.2019
comment
Анду, я только что попробовал твое предложение, оно прекрасно работает!!! Спасибо большое за вашу помощь. Я очень ценю это. Извините за мой вопрос не так ясно, как я хотел. - person Nate; 28.04.2019
comment
Рад, что это сработало. Была веселая поездка. Пожалуйста, отметьте ответ как принятый, чтобы помочь будущим читателям. Удачи! :) - person Andu Andrici; 28.04.2019
comment
Как я могу это сделать? Нажать кнопку ответа на мой вопрос? И все же последний вопрос. Мне бы очень хотелось, чтобы галерея была в формате, скажем, 3 изображения в строке, и при этом они по-прежнему отображались равномерно и отображали, как вы помогли мне настроить. Я пытался сделать таблицу, но это мешает вашему решению. Наверное, я еще слишком новичок. - person Nate; 29.04.2019