Question

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

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

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

Answer 1

只要您没有更改任何WordPress默认设置，图片大小将始终为150px x 150px。你怎么知道的？因为您正在传递缩略图＆＃39;参数the_post_thumbnail。

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

See more here about the behavior of the_post_thumbnail.

Answer 2

实际上你只需要使用＆＃34; max-height＆＃34; ＆安培; ＆＃34; max-width＆＃34;，最好在约束外部图像大小之外添加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>

感谢。

Answer 3

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

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

Answer 4

您需要进行2次更改。

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

然后，您希望将最大宽度设置为100％。这两个属性组合将意味着您的图像将按比例缩放，但永远不会超过原始上传大小。

class XArray extends Array {
   
   push() {
     super.push(...arguments);
     return (arguments.length === 1) ? arguments[0] : arguments;
   }
 
}
//---- Application
let list  = [1, 3, 7,5];

list = new XArray(...list);

console.log(
  'Push one item : ',list.push(4)
);

console.log(
  'Push multi-items :', list.push(-9, 2)
);

console.log(
   'Check length :' , list.length
)

如何使图像不拉伸

4 个答案: