Question

我正在调用特定帖子的精选图片作为标题的全角背景图片。为了动态地执行此操作，我将CSS插入到HTML中的循环中。

这在笔记本电脑/台式机上效果很好，但由于某种原因，这些图像不适用于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>

Answer 1

我不知道您的HTML是什么，我假设您知道如何运行CSS媒体查询。我建议尝试类似下面的内容

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

这会将图像缩小到特色div

内任何图像的80％宽度（和高度）

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

Answer 2

您可以使用background-size属性。

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

或

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

See MDN for more info on background-size

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

2 个答案: