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

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

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

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

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