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%。这 2 个属性的结合意味着您的图像将响应地缩放，但绝不会超过原始上传大小。

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