Как я могу заставить баннер увеличиваться в размерах и иметь ширину в CSS?

Question

Я уже некоторое время читаю переполнение стека, но это мой первый пост!

У меня есть этот сайт: https://oliv-collection.com/.

Баннер сверху имеет полную ширину до тех пор, пока экран, на котором вы его просматриваете, имеет разрешение менее 1600 пикселей (исходная ширина изображения). Если разрешение превышает это, баннер не покрывает всю ширину страницы.

Есть ли простой способ с помощью CSS увеличить ширину и высоту, чтобы охватить всю ширину? Я боролся с Google Inspector, но не могу понять, что делать!

Спасибо

Answer 1

Вы должны использовать

width: 100%;

Независимо от ширины экрана, баннер будет иметь максимальную ширину.

Answer 2

Возможно, есть лучшие способы сделать это, но я справился с чем-то похожим на то, что вы просите, изменив стилистику изображений баннера следующим образом:

.slick-slider .nm-banner img, .nm-banner img {
  display: inline-block;
  width: 100%;
}

То, что я сделал, заменило width: auto; до width: 100% для правильного изменения размера изображения и удалите max-width: 100%; и height: auto;. С моим изменением изображение баннера будет увеличиваться с шириной экрана даже выше 1600px. Это работает для меня в Safari на macOS.