Автоматическое изменение размера изображений после определенной ширины

Question

Итак, у меня есть веб-страница с баннером (1024 пикселя), а затем несколько фотографий в центральной области ниже. Я ищу с помощью CSS (или другой альтернативы), чтобы автоматически изменить размер всех изображений (значков баннеров и страниц) вниз, если размер страницы в браузере меньше минимальной ширины баннера, и если он больше этого минимального размера , ни одно из изображений не масштабируется (баннер находится на прозрачном фоне, поэтому он «изменяет размерность»).

Это похоже на довольно простой вопрос, поэтому я сомневаюсь, что это действительно потребует всего этого, но все другие ссылки, которые я видел, не сделали этого для меня (и я действительно неумел в CSS). Любые советы приветствуются и благодарим заранее!

Answer 1

Использование медиа запросов в вашем CSS - что-то вроде этого:

@media screen and (max-width: 400px) { 
    #container { 
    width:320px; 
    } 
} 
@media screen and (min-width: 401px) and (max-width: 900px) { 
    #container { 
    width:700px; 
    } 
} 
@media screen and (min-width: 901px) { 
    #container { 
    width:900px; 
    } 
} 

(Можно настроить номера/скобки).

Затем установите ширину изображения в процентах от контейнера.