Как изменить размеры баннеров, чтобы хорошо соответствовать мобильному мобильному? ⇐ Html

[Anonymous]

Я работаю над своим личным веб -сайтом под названием stellarfacts.com, я строю его с сентября. Они хорошо смотрятся на рабочем столе, но на мобильных устройствах он сосредоточен на баннере, но не показывает всего этого. Есть ли способ уменьшить его, так что все видео изменялось, чтобы соответствовать мобильному мобильному мобильному размеру? Вот код, если есть что-то еще, что вам нужно увидеть, пожалуйста, дайте мне знать, и я предоставлю его.

Код: Выделить всё

[img]/Assets/Banners/artemis_IIBanner.jpg[/img]
        alt="Artemis II crew walking towards the camera"
/>
Artemis II

Astronauts will be in proximity of the moon for the first time since
1972. Artemis II is planned to launch no later than April 2026.


< /code>
    #banner img {
width: auto;
height: 100vh;
align-content: center;
object-fit: cover;
filter: brightness(75%);
}
< /code>
Я попытался установить ширину как 100% и 100 ВВт, а также с высотой, установленной в виде AUTO и 100VH. Думая о том, как работает ширина взгляда, я считаю, что 100 ВВт - это то же самое, что и 100%. Я не использую пиксели, чтобы сохранить отзывчивость моего веб -сайта. Я довольно новичок в JavaScript, но использовал его для отзывчивой навигационной панели. Я бы создал отдельную таблицу стилей с названием Banners.css и сделал каждое баннерное изображение отдельным классом, где я использовал бы свойство фоно-image 

.

Код: Выделить всё

.banner1 {
background-image: (url="Assets/Banners/banner1.png");
}

оцените ваш ответ в Advanced


Подробнее здесь: https://stackoverflow.com/questions/796 ... -on-mobile