Блок VW, атрибуты размеров и медиа-запросы не работают

Question

В последнее время я изучал адаптивные изображения, но я боролся с единицей VW и атрибутом размеров. Вниз я опубликую пример, но я пробовал много вариантов, даже добавляя медиа-запросы или загружая страницу на Firefox, я просто не понимаю.

Я хочу, например, чтобы изображение уменьшилось до половины размера области просмотра, когда windows больше 800 пикселей.

Нужно ли использовать точный код CSS или Я могу сделать это просто с помощью HTML? Разве атрибут размеров не меняет изображение даже сам по себе?

<img src="Images/large.jpg" 
     sizes="50vw" >

Answer 1

Установите «мобильную» ширину вне медиазапроса, затем установите медиазапрос на min-width: 800px:

#img{
    width: 200px;
}

@media screen and (min-width: 800px){
    #img{
        width: 50vw;
    }
}

<img src="https://placekitten.com/500/500" id="img">