• ДОБРО ПОЖАЛОВАТЬ В КЛУБ ПО WORDPRESS

    Мы активно растущий клуб по WordPress и нам нужна помощь каждого человека, в том числе и Ваша! Не стесняйтесь и станьте частью большого сообщества.
    Мы делимся новостями, отытом и полезными советами! Пройдите простую регистрацию, чтобы пользоваться всеми возможностями нашего клуба.

    Присоединяйтесь к нам, вам обязательно понравится - Присоединится

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

lisleroy

НОВИЧОК

lisleroy

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

levati

СВОЙ

levati

СВОЙ
Сообщения
56
Здравствуйте. Это Для просмотра ссылки Войди или Зарегистрируйся виноват.

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

Пример кода с неправильной страницы:
<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">
Набор фото в srcset отображается в современных браузерах вместо src и регулируется правилами sizes, которые подбирают картинку из набора руководствуясь правилом:
При ширине ≤ 1024 пикселей подставить изображение, ближайшее к ширине окна браузера, а если больше - с шириной 1024рх.​

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

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

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

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

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