WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Самая быстрая Тема-конструктор для WordPress

Как выводить другие изображения в посте в зависимости от размера экрана?

Добрый вечер. Натягивая верстку на WordPress столкнулся с проблемой.

Листинг 1.

<div class="blog-post__left">
	<?php if ( has_post_thumbnail()) { ?>
	<img class="blog-article__img_big" <?php the_post_thumbnail('image_size_big'); ?>
	<img class="blog-article__img_small" <?php the_post_thumbnail('image-size-small'); ?>
	<?php } ?>
</div>

Первый css стиль отрабатывает нормально, а вот когда уменьшаешь расширение экрана то размер изображения меняется на непонятно какой. Как сделать правильно? Очень прошу помощи.

Как сделать так чтобы при изменении размера экрана подгружалось изображение другого размера?

0
jaserds
2 месяца назад
  • 0
    kolshix619 paxtoy.com

    если через css :
    есть приблуда @media

    по-моему можно вот так

    .blog-article__img_big{
    		display: none;
    }
    .blog-article__img_small{
    		display: block;
    }
    @media screen and (max-width: 1090px){  /* тут размер и правила срабатывания*/ 
    	.blog-article__img_big{
    		display: block;
    	}
    	.blog-article__img_small{
    		display:none;
    	}
    }
    anseme месяц назад

    Плохой пример, так на мобилках будет грузится 2 изображения... а если там таких изображений 20...

    Комментировать
  • 0

    Загрузкой правильного изображения занимается сам браузер (все современные)

    Но указать им эти изображения нужно через srcset вот так например:

    <img src="https://images.lucasfox.com/location/4x3_1600w/BE7EB6F914.jpg" sizes="(min-width:64em) 60vw, 100vw" 
     srcset="https://images.lucasfox.com/location/4x3_420w/BE7EB6F914.jpg 420w,
     https://images.lucasfox.com/location/4x3_560w/BE7EB6F914.jpg 560w,
     https://images.lucasfox.com/location/4x3_700w/BE7EB6F914.jpg 700w,
     https://images.lucasfox.com/location/4x3_960w/BE7EB6F914.jpg 960w,
     https://images.lucasfox.com/location/4x3_1280w/BE7EB6F914.jpg 1280w,
     https://images.lucasfox.com/location/4x3_1600w/BE7EB6F914.jpg 1600w"
     alt=" ">

    wp_get_attachment_image_srcset() вот так можно брать эти данные

    Kama месяц назад

    Вот еще статья по теме: https://wp-kama.ru/id_13564/atributy-scrset-sizes.html

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация