以横向或纵向的原始视图显示图像，不拉伸

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

首先注意：如果不倾斜图像的纵横比，肖像图像永远不会填充与水平图像相同的空间，这就是您在代码/示例中看到的。

假设所需的效果是让它们显示“相同大小”，您最终会得到一个正方形的图像项目。在你的例子中

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

如果您将肖像和风景的最大高度设置为相同，则肖像图像的左侧和右侧将有空白。

我尝试了很多次但我不能，我希望它像这样向我展示

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

Answer 3

您可以使用 css 属性，因为

object-fit: cover;

它将裁剪肖像图像，但至少它不会以丑陋的方式拉伸。