Вопрос Размер фото в записи

[lisleroy]

Здравствуйте! Вопрос по фотографиям в записях на сайте. Почему-то, размеры не соответствуют заданным. Неважно, выставляю ли я "средний" или "полный", картинку растягивает на весь экран в большинстве статей. при этом, в некоторых, фото оказываются нормального размера. В чём проблема и как сделать так, чтоб фото не размазывало?
Ансель Адамс - Ассоциация фотографов Евразия пример статьи с растянутыми фото
Себастьян Сальгадо - Ассоциация фотографов Евразия нормальные фото

 

[levati]

Здравствуйте. Это srcset виноват.

Посмотрите, как выглядит одна фотография на Вашем сайте:

[CODE lang="html" title="Пример кода с неправильной страницы"]<img loading="lazy"
class="aligncenter size-large wp-image-12863"
src="https://eurasia-photo.com/wp-content/uploads/2022/08/zerkalnoe-ozero-1935.-fotograf-ensel-adams-1-1024x576.jpg"
alt="Ансель Адамс" width="1024" height="576"
srcset="https://eurasia-photo.com/wp-content/uploads/2022/08/zerkalnoe-ozero-1935.-fotograf-ensel-adams-1-1024x576.jpg 1024w,
https://eurasia-photo.com/wp-content/uploads/2022/08/zerkalnoe-ozero-1935.-fotograf-ensel-adams-1-694x390.jpg 694w,
https://eurasia-photo.com/wp-content/uploads/2022/08/zerkalnoe-ozero-1935.-fotograf-ensel-adams-1-150x84.jpg 150w,
https://eurasia-photo.com/wp-content/uploads/2022/08/zerkalnoe-ozero-1935.-fotograf-ensel-adams-1-768x432.jpg 768w,
https://eurasia-photo.com/wp-content/uploads/2022/08/zerkalnoe-ozero-1935.-fotograf-ensel-adams-1-1536x864.jpg 1536w,
https://eurasia-photo.com/wp-content/uploads/2022/08/zerkalnoe-ozero-1935.-fotograf-ensel-adams-1-1390x782.jpg 1390w,
https://eurasia-photo.com/wp-content/uploads/2022/08/zerkalnoe-ozero-1935.-fotograf-ensel-adams-1.jpg 1920w"
sizes="(max-width: 1024px) 100vw, 1024px"
data-mwl-img-id="12863">[/CODE]

Набор фото в srcset отображается в современных браузерах вместо src и регулируется правилами sizes, которые подбирают картинку из набора руководствуясь правилом:

​

При ширине ≤ 1024 пикселей подставить изображение, ближайшее к ширине окна браузера, а если больше - с шириной 1024рх.​

Это в теории так.

То есть, после 1024рх подставляется картинка с шириной 1536рх с уменьшением до 1024рх. Но, ведь, может и 768рх растянуться до 1024рх. Ближайший, не значит больший.

На практике всё работает ожидаемо, если все загруженные фото одинаковых пропорций, поскольку в логике подстановки учитывается только ширина окна браузера, про высоту не думают.

Стоит залить фото с отличающейся пропорцией ширина х высота, например, в портретной ориентации или обрезанную по-другому - и получится Ваша проблема.

Использовать srcset SEO-шниками настоятельно рекомендуется, но все фото должны быть одной ориентации и одинаковых пропорций.