Wordpress：将特色图像称为具有自定义大小的背景图像答案

【问题标题】：Wordpress: Calling featured image as background image with custom sizeWordpress：将特色图像称为具有自定义大小的背景图像
【发布时间】：2013-10-18 17:07:33
【问题描述】：

我目前将特定帖子的特色图片称为标题的全角背景图片。为了动态执行此操作，我在 HTML 的循环中插入了 CSS。

这在笔记本电脑/台式机上效果很好，但出于某种原因，图像并不能在 iPad 上缩放——它们会变得很大。

是否可以将图像的尺寸（即：宽度：768px）添加到以下内容？然后我可以使用 CSS 媒体查询调用它，以便在 iPad 上查看时以这种大小加载。

background-image: url("<?php echo $image[0]; ?>");

谢谢

添加 HTML 代码：

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-    post-thumbnail' ); ?>

<style>
.issue-header {
background-image: url("<?php echo $image[0]; ?>");
}
</style>

【问题讨论】：

标签： css image wordpress background-image

【解决方案1】：

我不知道你的 HTML 是什么，我假设你知道如何运行 CSS 媒体查询。我建议尝试类似以下的方法

#featured img{
    width: 80%; (or pixels if you prefer)
}

这会将图像缩小到精选 div 中任何图像的 80% 宽度（和高度）

请提供更多代码，例如 HTML 或您的网站。我可能会更好地帮助你。

【讨论】：

感谢您的回复，@Jester。不幸的是，按照您的建议调整大小会更改整个 div 的宽度，而不仅仅是背景图像。我已将 HTML 部分粘贴到我的原始帖子中。我认为问题源于我将背景图像 URL 动态拉为帖子的特色图像（当 URL 是静态时，相同的设置可以很好地调整大小）。在笔记本电脑上更改浏览器大小时，它也可以很好地调整大小——只有在移动设备和 iPad 上它不能正确调整大小（它被放大得令人难以置信）。谢谢
您解决了这个问题吗？我有同样的问题，在电脑上完美运行，在手机上看起来很丑...... :(

【解决方案2】：

您可以使用background-size 属性。

.issue-header {
background-size: 200px 200px;
}

或

.issue-header {
background-size: cover;
}

See MDN for more info on background-size.

【讨论】：