php - 如何让图片不拉伸(stretch)

Question

在我的首页上，我希望帖子缩略图是页面的全宽。但我只希望它是页面的整个宽度，直到上传的图像宽度为止。因此，当页面变得越来越大时，我希望图像在达到实际图像尺寸后不再是 100%，然后保持该尺寸。现在我已经弄清楚如何使帖子缩略图全宽，但是随着页面变大，图像只会拉伸(stretch)以适合 100%。我该如何解决这个问题？

<?php the_post_thumbnail('thumbnail', array('class' => 'large-front-thumbnail')); ?>

.large-front-thumbnail {
    position: relative;
    width: 100%;
    height: auto;
}

Answer 1

您需要进行 2 项更改。

现在您将图像宽度设置为 100%。当您将宽度设置为 100% 时，无论上传的图像大小如何，它都会拉伸(stretch)到容器的宽度。您需要将宽度设置为自动。

然后您希望将最大宽度设置为 100%。这两个属性相结合意味着您的图片将响应式缩放，但永远不会超过原始上传大小。

.large-front-thumbnail {
    height: auto;
    max-width: 100%;
    position: relative;
    width: auto;
}