0

Помогите, пожалуйста, с размером картинок, выводимых с помощью 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;
}

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

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

.hero-img img {
  width: 100%;
  height: 540px;
}

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

Можно ли это полечить?

1
  • узнай про srcset
    – SeVlad
    25 ноя 2020 в 6:54

1 ответ 1

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

или

 wp_get_attachment_image_url()
3
  • Дело не в этом. wp_get_attachment_image подгоняет ширину исходя из экрана, а высоту исходя из пропорций оригинала. При попытке изменить высоту через css, вп вытягивает высоту текущей картинки (которая подгоняется по размеру экрана).
    – Стас
    24 ноя 2020 в 19:32
  • 1
    Тогда воспользуйтесь похожей функцией wp_get_attachment_image_url(). В ней можно задать размера выводимой картинки вне зависимости от разрешения экрана.
    – KodimWeb
    24 ноя 2020 в 19:52
  • Размер картинки вне зависимости от размера экрана это, безусловно, интересно, но хотелось бы с зависимостью от размера экрана, но с возможностью как-то управлять высотой.
    – Стас
    24 ноя 2020 в 21:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.