-1

我正在尝试将特色图像设为 100% 宽度，即使它的像素大小不是屏幕/主体的宽度：我在通过 get_the_post_thumbnail 调用图像时使用了“完整”变量，但我不确定是什么是实现我想要的最佳实践。

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

有什么建议吗？

谢谢

4

4 回答 4

0

您可以将图像设为 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
}

这对我有用！希望它对你有用。干杯!

于 2017-11-02T09:42:24.800 回答
0

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

img {
  width: 100%;
}

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

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

于 2017-11-02T09:42:56.747 回答
0

如果您the_post_thumbnail在将 php 代码转换为 html 代码后使用，则可以访问标签srcset中的属性。img在srcset您可以访问其他图像大小。因此，您可以管理图像大小。

所以你可以选择 use width: 100%incss或 usesrcset

读这个srcset

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

于 2017-11-02T09:43:00.347 回答
0

欢迎来到 SO，

我建议你使用 css：

#image{
  width: 100%;
}

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

于 2017-11-02T09:33:04.210 回答