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

Question

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

<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 我想知道怎么做

如果您使用相同的最大高度设置纵向和横向样式，则纵向图像的左侧和右侧将有空白。

我尝试了很多次，但我不能，我希望它像这样告诉我

在图像外观上，我想在框架的中心显示纵向图像，左右两侧都有一个空白区域，但如果图像是横向的，它会显示在整个框架内部，而不是显示两者的空白区域侧面。