Javascript 在原始视图中以横向或纵向方式显示图像而不是拉伸

我想在一个容器中显示多个图像，但如果图像是横向的，则效果不错，但如果插入图像时图像是纵向的，则显示为拉伸的。它展示了每一幅风景画，它并不美丽。我想显示每个图像，因为它的原始方向和容器的最大高度是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>

第一个注意事项：如果不扭曲图像的纵横比，纵向图像将永远无法填充与水平图像相同的空间，这是您在代码/示例中看到的

假设期望的效果是使它们显示为“相同大小”，那么最终将得到一个正方形的图像项。在您的示例中，

.max image set

如果使用相同的最大高度设置肖像和风景的样式，则肖像图像的左侧和右侧将有空白。横向上，如果您使用相同的最大宽度设置它们的样式，则在横向图像的上方和下方都会有空白。（假设它们在一个正方形中，期望的效果是使它们显示为“相同大小”）

这将导致像这样的事情

---

亲爱的@dylanjameswagner我想知道怎么做

如果使用相同的最大高度设置肖像和风景的样式，则肖像图像的左侧和右侧将有空白

我试了很多次，但是我不能，我想让它像这样展示给我看

---

在图像外观上，我想在画面中央显示肖像图像，左右两侧都有一个空白，但如果图像是横向的，则显示在整个画面内，而不是显示两侧的空白。

尝试

背景尺寸：auto或
背景大小：包含-在不裁剪或拉伸图像的情况下，尽可能大地缩放图像。谢谢@dalelandry，但这对我的工作没有帮助。如果您使用上面我的答案中的信息，但将宽度设置为更大的像素值。看起来你的图像是16:9的比例，是736px 414px
.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 */
}