2

Как при изменении размера окна сделать изменение размера картинки?

1

2 ответа 2

1

Вот пример, тут в окне стака он не работает, попробуйте выполнить его в вашей среде разработки:

img {
    width: 100%;
    height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="https://stackexchange.com/content/img/hero/check.png" width="100" height="100">
<p>Resize the browser window to see how the image will scale.</p>
</body>
</html>

0

Через media queries (медиа-запросы).

9
  • А можно пример? У меня ничего не получается 28 мая 2017 в 10:40
  • @media screen and (max-width: 540px){ body{ background-color: #435541; } .header-1{ font-size: 24px; font-weight: 700; } .header-2{ font-size: 9px; } .header-2 .header-2-bold{ font-size: 14px; } .wrapper-1 .img{ max-width: 100%; } } 28 мая 2017 в 10:41
  • Пришлите html код тоже 28 мая 2017 в 10:44
  • jsfiddle.net/x5jdo2hz 28 мая 2017 в 10:48
  • Я хочу сделать сайт адаптированным под мобильные устройства. И там есть картинка. Я хочу её уменьшать, чтобы она была полностью показана на устройстве 28 мая 2017 в 11:01

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.