Как сделать чтобы при разных разрешениях менялся размер картинки?

Question

[Павел]

Как мне сделать чтобы при разных разрешениях менялся размер логотипа?
Я делаю адаптивный сайт

Comments

[Froggyweb]

логотип обычно небольшая картинка, чаще в svg и менять его не нужно
вообще есть тег picture, в котором можно указывать разные изображения в зависимости от разрешения и размеров экрана

но скорее всего в твоем случае проще прописать в css

img {
   max-width: 100%;
}

Answer 1

[SagePtr]

Задавать размер относительно, к примеру, ширины экрана (в единицах измерения vw).
Разумеется, сам логотип при этом должен быть либо векторный, либо большой по размеру, дабы не сильно терял в качестве при изменении размеров.

Answer 2

[Lord_Dantes]

Это добавить в head

<meta name="viewport" content="width=device-width, initial-scale=1">

Это примеры CSS

/* логотип 50px до 1200px */
@media screen and (max-width:1200px){
.logo{width:50px}
}

/* логотип 50px до 992px ширины экрана */
@media screen and (max-width:992px){
.logo{width:50px;}
}