Как изменить размер IMG зависит от разрешения?

Question

У меня есть img 200px на 200px. У меня есть контейнер для IMG. Размер контейнера составляет 100% х 100%. В основном размер контейнера зависит от размера окна. Чего я хотел бы добиться, так это если размер экрана становится меньше 200 пикселей, то он должен изменить размер img и сделать его меньше. Я также хотел бы сохранить соотношение IMG. он должен уменьшаться с высоты и ширины. есть ли готовый код для этого?

Answer 1

Просто добавьте:

img { max-width: 100%; }

к вашему CSS (возможно, более конкретно с вашим селектором) и убедитесь, что в вашем контейнере указано position: relative.

Вы, вероятно, хотите, чтобы ширина контейнера не превышала ширину вашего изображения, так как оно начнет становиться пиксельным.Если это не проблема, вы можете заменить max-width на width выше. Пример здесь .

Answer 2

Изменение размера изображения не является хорошим вариантом, поскольку оно снижает общую производительность вашего сайта, затрачивает больше времени на визуализацию страницы и поглощает оперативную память вашего пользователя.

Answer 3

Просто установите ширину ИЛИ высоту изображения на 100% с помощью CSS.Если вы укажете только одно из этих значений, будет вычислено другое, чтобы сохранить соотношение сторон изображения.