2

在我的首页上，我希望帖子缩略图是页面的整个宽度。但我只希望它是页面的整个宽度，直到它上传的图像宽度。因此，当页面变得越来越大时，我希望图像在达到其实际图像大小后停止为 100%，然后保持该大小。现在我已经想出了如何使帖子缩略图全宽，但是随着页面变大，图像只会拉伸到 100%。我该如何解决这个问题？

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

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

4

4 回答 4

3

您需要进行 2 处更改。

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

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

.large-front-thumbnail {
    height: auto;
    max-width: 100%;
    position: relative;
    width: auto;
}
于 2017-01-21T07:51:10.137 回答
0

以下 CSS 应该是您所需要的：

.large-front-thumbnail {
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
}
于 2017-01-20T20:05:11.993 回答
0

只要您没有更改任何 WordPress 默认值，图像大小将始终为 150 像素 x 150 像素。你怎么知道的？因为您将 'thumbnail' 参数传递到the_post_thumbnail.

因此，正如@pol 所说，设置max-width150px 的规则将起作用。

在这里查看更多关于the_post_thumbnail.

于 2017-01-20T19:33:55.283 回答
0

实际上你只需要使用“max-height”和“max-width”，最好在约束外部图像大小之外添加 div 容器。

<div style="width: 100%;">
    <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx" alt="anything" style="position: absolute; max-height: 100%; max-width: 100%;"/>
</div>

谢谢。

于 2017-01-20T19:39:17.087 回答