Adaptation of content and ottsentrovano how to do (CentreVu compression of the screen)?

Hello.
How to iintroduce pictures under compression when compressed to a certain point that the text next to it is built in a column at the 1-2-3-4 letters that is not very nice and I want to do to the picture was centroblast and then it will be fine.

To make it clear what I mean, attached a screenshot. (in the screenshot highlighted in red frame).
5afd2fdab4bc8192566086.png

I have a small deal with that is if the photo on the left side that indents other, if on the right the indentation of the identity of others.

.catinf img{
 width: 790px;
 max-width: 100%;
 margin:10px 0 10px 0;
}
.catinf img[style*="left;"] {
 margin: 5px 20px 10px 0;
 height: 100%;
}
.catinf img[style*="right;"] {
 margin: 5px 0 10px 20px;
 height: 100%;
}

@media only screen and (max-width: 500px) {
 .catinf img[style*="left;"] {
 margin: 5px 0px 10px 0;
 height: 100%;
 text-align: center;
}
 .catinf img[style*="right;"] {
 margin: 5px 0 10px 0px;
 height: 100%;
 text-align: center;
}
 .catinf img{
 text-align: center;
 margin: 0 auto;
}
}
June 5th 19 at 21:30
3 answers
June 5th 19 at 21:32
Solution
Cerise js resolved the issue.

resize_document function(){
 var width = $(window).width(); 

 if (width < 600){
 $(".catinf img").addClass('img_minimize'); 
 }else{ 
 $(".catinf img.img_minimize").removeClass('img_minimize'); 
}
}
resize_document();

$(window).resize(function(){
resize_document();
 });


.img_minimize{
 float:none!important; 
 display: block!important;
 margin: 0 auto!important; 
 margin-top: 5px!important;
 margin-bottom: 10px!important;
}
June 5th 19 at 21:34
Are you a masochist ?
https://jsfiddle.net/ouodkeLn/12/

updated
not so will not work, I have the same css defines if images have [style*="right;"], he / she assigns a style to the image which is on the right edge.

in General, something. but in my version.
and in your variant it is necessary in manual to insert into the div left or right, this is not something, I do not touch diva ! css with my version he checks if images have the chair on the left or right edge triggers the class for this picture. - lavonne_Kloc commented on June 5th 19 at 21:37
June 5th 19 at 21:36
Very spike option. Read about adaptive layout, then, once you know how, and why.
The option above is good. You can just set the image display: block and then take up the whole width (if you did at floata)
so I tried it. - lavonne_Kloc commented on June 5th 19 at 21:39
I have the automatic version which itself defines a css style at the images and assigns it the styles needed. if the Pro option that the above person wrote, it is not suitable. I don't have to enlarge the image, just centering at a certain screen size.
well, in his version of reason div ponapihano everywhere, and there you have to add this div and left or right styles to push.
in my version everything automatically, defines the image and sets its styles. - lavonne_Kloc commented on June 5th 19 at 21:42

Find more questions by tags CSS