时间戳

首页 > 解决方案 > 响应式全宽 Wordpress 帖子图片

javascript - 响应式全宽 Wordpress 帖子图片

问题描述

我有一个 Wordpress 网站，我帖子中的图像会强制我的网站宽度，当它是移动大小时会破坏它。寻找代码以根据容器大小使 Wordpress 发布图像全宽（具有自动高度以保持比例）。

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<div class="container">

            <?php the_content();?>

</div>

<?php endwhile; ?>
<?php endif; ?>

编辑

function theme_content_image_sizes_attr( $sizes, $size ) {
$width = $size[0];

if ( 740 <= $width ) {
    $sizes = '(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px';
}

return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'theme_content_image_sizes_attr', 10, 2 );

标签： javascriptcsswordpress

解决方案

只是一个建议，也许你可以使用特色图像作为背景，这样你就可以控制宽度和高度。

<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>

<div class="header-wrap" style="background-image: url('<?php echo $backgroundImg[0]; ?>')">
</div>

.header-wrap {
   background-repeat: no-repeat;
   background-size: cover;
   padding: 80px 0;
}

推荐阅读