Отображать изображения в оригинальном виде в альбомной или портретной ориентации без растяжения

Question

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

<li class="main-image-set ">
    <a href="<?=get_image($product['image_one']);?>" class="thumbnail"  style="padding: 3px; width: 100%; max-height: 520px; height: auto;">
        <img src="<?=get_image($product['image_one']);?>" style="height: 414px"  >
    </a>
</li>

Answer 1

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

Предполагая желаемый эффект чтобы они выглядели «одинакового размера», в результате вы получите элемент изображения в квадрате. В вашем примере .max-image-set

Если вы создадите портрет и пейзаж с одинаковой максимальной высотой, у вашего портретного изображения будут пробелы слева и справа от него. Поперечно, если вы создадите их с одинаковой максимальной шириной, у вас будет пробел выше и ниже пейзажного изображения (при условии, что они в квадрате, и желаемый эффект состоит в том, чтобы они выглядели «одинакового размера»)

.main-image-set a {
    display: flex; /* for alignment */
    justify-content: center; /* horizontally align portrait image */
    align-items: center; /* vertically align landscape image */


    /** fixed width, creates a square for our image to live */
    width: 414px;
    height: 414px;
    /* Could be styles with a responsive technique a like aspect ratio prop, but that is outside the scope of here */

    background-color: #eee; /* so you can see the "square", for demo purposes */
}

.main-image-set img {
    width: auto; /* to counter any width attributes and allow intrinsic image width */
    height: auto; /* to counter any height attributes and allow intrinsic height */
    max-width: 100%; /* scale with the parent element width */
    max-height: 100%; /* scale with the parent element height */
}

Это приведет к чему-то вроде этого ...

Answer 2

Уважаемый @dylanjameswagner Я хочу, как это сделать

Если вы создадите портрет и пейзаж с одинаковой максимальной высотой, ваше портретное изображение будет иметь пробелы слева и справа от него.

Я пробовал много раз, но не могу, я хочу, чтобы он показывал мне вот так

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