如何使图像不伸展

在我的首页上，我希望发布缩略图是页面的整个宽度。但我只希望它是整个页面的宽度，直到它上传的图像宽度为止。因此，当页面变得越来越大时，我希望图像一旦达到其实际图像尺寸就停止100％，然后保持这个尺寸。现在，我已经想出了如何使文章缩略图全宽，但是随着页面变大，图像只能伸展至100％。我怎么能解决这个问题？如何使图像不伸展

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

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

来源

2017-01-20 user6738171

添加最大宽度与图像的宽度。 – pol

但是，如果每个帖子缩略图以不同的大小上传会怎么样。 – user6738171

只要你没有改变任何你的WordPress默认的，图像尺寸将永远是150像素150像素。你怎么知道的？因为您正在将“缩略图”参数传递给the_post_thumbnail。

因此，正如@pol所说，设置一个max-width规则为150px将起作用。

See more here about the behavior of the_post_thumbnail.

来源

2017-01-20 19:33:55 brogrammer

但是如果我上传到精选图片中的照片是1700×1139？那么我想要的图片是最大的1700.如果照片是说1000 x 500我想最大宽度为1000 – user6738171

@ user6738171然后要小心使用'the_post_thumbnail'，因为正如文档所示，它会在上传时创建一张自动裁剪为150px×150px的图片副本。 – brogrammer

其实你只需要使用“最大高度” &“最大宽度”，作为优选添加的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-20 19:39:17

下面的CSS应该是你需要什么：

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

来源

2017-01-20 20:05:11 GHaddon

你需要做2度的变化。

现在您将图像宽度设置为100％。当您将宽度设置为100％时，无论图片上传的尺寸是多少，都会延伸到容器的宽度。您需要将宽度设置为自动。

然后您想要设置100％的最大宽度。这两个属性组合在一起意味着您的图像可以响应缩放，但不会超过原始上传大小。

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

来源

2017-01-21 07:51:10

如何使图像不伸展

回答

相关问题