Тоже страдал от такой штуки. И даже спрашивал как-то на хабре и мы анализировали с топом.
Короче если у картинки есть родитель с каким-то фиксированным рамером - она заполнит его.
Если нет (независимо от того, есть ли выше у предков какой-то фикс размер) - она будет считать эти проценты от самой себя. Т.е если оригинал картинки допустим 2000х1000пх и мы поставим ей width:100% или max-width:100%в стилях - она не будет заполнять 100% доступного места от родителя, а будет показывать 100% от своего оригинального размера. Т.е 2000х1000пх
И даже если у картинки будет обёртка, размер обёртки будет зависеть от размера картинки, а не от того, что ты зада в стилях этой обертке. Поэтому лично я использую обертку как relative, а картинку как absoluteсо значениями WH:100%
Такая вот шляпа.
Поэтому я в любом своём проекте никогда не вставляю картинки без обёртки. Только если у них фикс.размер по макету.
Ещё в качестве примера могу показать своё:
На первый взгляд, тут у родителя нет фикс. размера, однако все картинки адекватно вебя ведут... Но не тут то было. CSS правило aspect-ratio: 1/1; у обертки, делает этой обёртке фикс размер, т.к по итогу браузер пересчитывает это в пиксели)) Стоит его убрать - картинки пойдут по п. Я искал инфу по этому поводу в спецификации и тд., но чет не нашел. Методом тыка напоролся, поборолся, понял что нифига не выйдет с этим сделать и принял так, как оно есть.
Так что как итог и ответ: Она и не должна сжиматься без родителя с фикс размером, т.к ориентируется на свой собственный размер.
