在原始视图中横向或纵向显示图像，不拉伸

Question

我想在一个容器中显示许多图像，但如果图像是横向的，它还不错，但如果图像是纵向的，当我插入它时，它会显示拉伸。它显示每一张图片景观，它不漂亮。我想显示每个图像，因为它的原始方向和容器的最大高度为415px。这是我的输出：风景图像纵向图像请帮助这是我的代码。

<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

亲爱的@dylanjameswagner我想怎么做

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

就图像外观而言，我想在框架的中心显示肖像图像，左右两侧都有一个空白，但如果图像是横向的，则显示的是整个框架内的图像，而不是显示两侧的空白。

Answer 2

首先注意：纵向图像永远不会填充与水平图像相同的空间，而不会扭曲图像的长宽比，这就是您在代码/示例中看到的。

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

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

.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 */
}

这会导致这样的结果。。。