Блог

Главная - Вопросы по программированию - Адаптивное полноразмерное изображение записи WordPress

Адаптивное полноразмерное изображение записи WordPress

#javascript #css #wordpress

#javascript #css #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 );

Комментарии:

1. Вы можете изменить размер изображений в зависимости от ширины браузера, используя @media правило в css . Если вы проведете исследование @media , я уверен, вы сможете написать решение.

2. Я не ищу размер изменения, поскольку вы правы, написав код для размера изображения на основе @media. Но я ищу полноразмерные изображения независимо от ширины. Изображения не будут иметь установленного размера

3. Итак, вы хотите, чтобы изображения масштабировались / соответствовали ширине экрана? Можете ли вы показать, css какие изображения вы используете в данный момент для рассматриваемых изображений. Спасибо.

4. Я пытаюсь изменить код из похожих тем в отредактированном виде. Просто не уверен, как. Я не привязан к этому методу, если есть способ получше.

5. По сути, происходит то, что мои изображения в настоящее время загружаются в определенном размере. При уменьшении масштаба окна изображения остаются определенного размера и сохраняют ширину сайта на прежнем уровне. (которое создает горизонтальную полосу прокрутки на мобильных устройствах). Я хочу, чтобы они имели адаптивную полную ширину, чтобы они были настолько большими, насколько это возможно, но не меняли ширину веб-сайта

Ответ №1:

Просто предложение, может быть, вы можете использовать показанное изображение в качестве фона, чтобы вы могли контролировать ширину и высоту.

 <?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;
}

Комментарии:

1. Это отличное предложение, и я действительно использую функциональное изображение аналогичным образом. Я имею в виду изображения, которые помещены в саму публикацию (смешанные с текстом)

2. хорошо, можете ли вы добавить эти стили к изображениям вашего контента img { width: 100%; max-width: 100%; display: block; } но я предполагаю, что это все еще зависит от фактического размера изображения