.newst img{
width: 100%;
//max-width: 790px;
margin:10px 0 10px 0;
max-width: 90%;
height: auto!important;
}
.newst img[style~="float:left;"] {
margin: 0 20px 10px 0;
height: 100%;
}
.newst img[style~="float:right;"] {
margin: 0 0 10px 20px;
height: 100%;
}
@media only screen and (max-width: 640px) {
img{
/*using important only cause have "style" in elements*/
display: block;
margin: 0 auto!important;
max-width: 90%!important;
float: inherit!important; }
}
И я бы использовала (и использую) модель box-sizing: border-box, а не calc.
я так понимаю вы тему не читали !
max-width: 100%; - так нельзя, я же не зря там поставил max-width: 790px;, это для того чтобы большая картинка была не больше контента.
Залил на тестовое доменное имя.
t.arinastar.ru/product/goroskop-roda--slavyanskiy-...
там 4 картинки, 1, она идет без стилей, через css задается стиль, который делает чтобы фотка не выходила за рамки контента. (max-width: 790px).
с этой картинкой 1 нет проблем, при сжатии, все ок, она сжимается, так как в ней нет стилей.
а вот остальные картинки которые я для теста распихал влево и вправо. вот с ними проблема, там через стили в самой картинке, я показываю картинку не большую, так как она большая, при клике на нее, картинка увеличивается. вот эти картинки в которых уже есть стили, они не уменьшаются, если сжимать окно браузера, они выходит за рамки. вот я и думаю как мне реализовать.
может можно через медиа сделать, чтобы при определенном размере экрана браузера, стили скидывались те что в картинки. и применялись стили css.