Question

我试图制作100％宽度的特色图片，即使它的像素大小不是屏幕/正文的宽度：我正在使用＆＃39; full＆＃39;通过get_the_post_thumbnail调用图像时变量，但我不确定实现我想要的最佳实践是什么。

我可以使用一些javascript（它有效，但我不知道我是否喜欢它或者它是否正确。）
我可以上传（2000/2500像素）大图像，让scrset管理较小的尺寸。但如果有人使用非常大的屏幕怎么办呢。那么图像本身的大小/质量如何（即使我知道如何处理图像压缩）。
我可以删除宽度和高度，以及sizes =（max-width：pixel）图像属性。这样我可以添加一些css规则，让我添加一些100％widht到图像。但如果这是正确的，我现在不知道。

有什么建议吗？

由于

Answer 1

欢迎来到SO，

我建议您使用css：

#image{
  width: 100%;
}

所以将宽度设置为100％并省略高度，您的图片将跨越整个宽度，高度将与原始宽度成比例。关于上传大图片，如果这样做，网站的加载时间会更长。最后，如果需要，可以使用JavaScript。

Answer 2

您可以将图像作为div（或其他块）元素的背景图像，然后对其应用background-size属性。例如：

#div-element {
    width: 100%;
    height: 200px; // Could be anything
    background: ulr('path-to-image') center center no-repeat // there are multiple options for this
    background-size: cover // This stretches the image to fill the div
}

这对我有用！希望它能为你做到。干杯！

Answer 3

您可以使用图片的HTML标记设置所有图片元素：

img {
  width: 100%;
}

请记住，这将应用于所有元素，因此图像将始终在它们所在的div /元素内100％。

对于任何响应问题，您将遇到的问题始终可以使用Bootstrap作为参考来解决它。 http://getbootstrap.com

Answer 4

如果您在将PHP代码转换为HTML代码后使用the_post_thumbnail，则可以访问srcset代码中的属性img。在srcset中，您可以访问其他图片大小。所以你可以管理图像大小。

因此，您可以选择在width: 100%中使用css或使用srcset

请阅读srcset

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

wordpress

4 个答案: