@Stanislav6

Как управлять размером выводимых с помощью wp_get_attachment_image?

Ребят, помогите с выводом картинок через wp_get_attachment_image.

Вывожу картинку 2304х1080 через Advanced Custom Fields:

<div class="hero-img">
    <?php 
        $image = get_field('hero-img');
        $size = 'full';
        if( $image ) {
            echo wp_get_attachment_image( $image, $size );
        };
    ?>
</div>


.hero-img {
  width: 100%;
  max-width: 1152px;
}
.hero-img img {
  max-width: 100%;
  height: auto;
}


Выводится картинка, которая подгоняется по ширине экрана (контейнера), а высота рассчитывается исходя из пропорции оригинала. В моём случае, ширина 1152px а высота, соответственно, 540px.

Проблема в том, что я не могу управлять высотой этой картинки. Например, на планшете ширина контейнера картинки 768px, высота, соответственно, 360px. Предположим, что мне нужно увеличить высоту картинки на планшете с 360px до 480px:

.hero-img img {
height: 480px;
}

Но на выходе получаю мыльную картинку, потому что wp_get_attachment_image тянет высоту текущей версии картинки, которая уже подогнала под текущий размер экрана (контейнера) пропорционально оригиналу. В итоге я могу управлять шириной, но как только высота картинки превышает её пропорциональную ширину (исходя из оригинала) — она мылится.

Можно ли это полечить, и как?!
  • Вопрос задан
  • 32 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы