Ребят, помогите с выводом картинок через
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
тянет высоту текущей версии картинки, которая уже подогнала под текущий размер экрана (контейнера) пропорционально оригиналу. В итоге я могу управлять шириной, но как только высота картинки превышает её пропорциональную ширину (исходя из оригинала) — она мылится.
Можно ли это полечить, и как?!