<div style="text-align: left; padding: 16px; max-width: 700px;">
    <img style="max-width: 100%;">
</div>

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

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

(0) если скажу что никак (чиста на CSS без JS) то не поверишь же...

Подтверждаю. С JS мороки будет меньше.

(1) Правильно писать так: "Я не знаю как сделать на CSS без JS".
А еще лучше не писать вообще тем у кого нет ответа на мой вопрос.

(0) спроси у Помогите

(4) Он не скажет мне то чего я не знаю.

Я нашел два способа как сделать это на CSS, у обоих способов есть свои недостатки.

Жду совета знающих программистов.

Совет: поубавь гонору и поделись тем, что нашел.

(7) Хорошо.
Первое: использовать условия на размер окна в CSS типа: @media screen and (max-width: 400px)
но в этом случае придется переводить размеры блока в размеры окна, и при изменении верстки придется все пересчитывать.
Второе: Добавить перед картинкой да инлайн блока, поставить у картинки левый маргин с минусом чтобы она налезла на эти два блока, и размер этих блоков должен быть таким, что при сужении окна, второй блок перенесся на другую строку, за счет чего картинка сдвинется влево на ширину первого блока.

(8) >>Добавить перед картинкой дВа инлайн блока

Ап

(8) Первый вариант то что нужно. Только почему max-width а не width?

(11) потому что нужно условие "от 400рх и более" а не "ровно 400рх"

Но это плохой вариант, потому что его придумал полный чайник в верстке.

Надеюсь знающие люди подскажут более нормальный вариант.

(0) display: table-cell?

<div style="text-align:center">
    <div style="display:inline-block; width:200px; max-width:100%">
        <img src="https://bluenred.files.wordpress.com/2010/08/extruded-tubes-455.jpg"; style="width:100%"/>
    </div>
</div>

https://jsfiddle.net/wqLuz4d2/

(14) Не так все просто. Выравнивание должно быть по левому краю изначально.

(15) Зачем?
Ещё разок всё это дело в <div> обернуть?

(16) для дизайна.
Хоть в пять див обернуть, все равно не получается.

(17) На примере линка из (14) можешь показать, что у тебя не получается?

(18) там выравнивание не по левому краю, а по центру.

(19) Оно?
https://jsfiddle.net/wqLuz4d2/3/

http://habrahabr.ru/post/119127/

(20) Нет, картинка все так же по центру. Надо чтобы левый отступ был зафиксирован, а правый растягивающийся. А у тебя оба отступа растягиваются.

(21) Я как-то так сделал. Но при переходе границы размера окна происходит резкий скачок, нет пропорционального сжатия отступа. Был 16px, потом вдруг раз и 0px.
Либо придется задавать 16 разных правил для переходного режима.