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

Question

Я хочу, чтобы изображение никогда не увеличивалось и искажалось, но я хочу, чтобы края настраивались и изменялись, чтобы оставаться внутри границ браузеров, когда экран становится меньше.

EDIT:

Я знаю о максимальной ширине, но изображение меньше окна браузера.

Затем окно браузера максимизируется, и я не хочу, чтобы изображение росло больше его первоначального размера.

Изображение составляет примерно половину размера максимальной ширины окна браузера

Answer 1

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

<img src="/yourimg.jpg" style="max-width:100%"> 

Смотрите этот пример и изменить размер вашего браузера с, чтобы увидеть его в действии: http://jsbin.com/lonuqudaraki/1/edit

Answer 2

Я понял это

img {max-width: 500px; margin: auto;}