Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Высота банера для гугл спид тест


Recommended Posts

Возможно ситуация банальная но многим известная.

 

Есть на сайте банер. Его высота и ширина может менятся в зависимости от ширины страницы. Стандартная ситуация на любом сайте.

 

Но у гугла есть Cumulative Layout Shift, показатель смещения шаблона.

 

Так вот, гугл требует задавать высоту этого фото изначально, чтобы контент не смещался по мере появления банера. Но как я могу задать точную высоту, если она может быть разной для разных устройств? Будет либо растянуто либо сжато по высоте.

 

Есть ли какой то правильный метод решения этой проблемы?

Надіслати
Поділитися на інших сайтах


У зображення банеру, має бути клас img-responsive, який задає максимальну ширину зображення 100% відповідно до блоку, в якому воно розташоване, і висоту auto, щоб вона обчислювалася на основі співвідношення сторін зображення.

Тому задання розмірів зображення банеру не вплине на його відображення, якщо ви зробите наприклад так:

<div class="swiper-slide">
  {% if banner.link %}
  <a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" width="300" height="300" class="img-responsive" /></a>
  {% else %}
  <img src="{{ banner.image }}" alt="{{ banner.title }}" width="300" height="300" class="img-responsive" />
  {% endif %}
</div>

 

  • +1 1
Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.