Responsive Editor Images ~ OSM Development
MikeM
Top Teams
Mikey's All Star Team!
$85.00


Top Individuals
Stephen Hermer
$75.00
$10.00


*
*
Birthday:
Password:
Re-Enter Password:
Multiple choice field with four answers to choose from: Choice A
Choice B
Choice C
Choice D
Single Choice A
Single Choice B
Single Choice C
If 'Other', please specify
User entered payment field aka enter amount you want to donate aka enter amount of money you want to give us:
Product field where a quantity is already forced for you
$12.99Quantity
Total:
*
Please look at the text on this image and type it, exactly as shown, into the field provided.
300x200 4
Cameraman
300x200 4
300 x 200 6
Palm
300 x 200 6
300x200 2
Shore
300x200 2
300 x 200 5
Skycastle
300 x 200 5
300x200 3
Tracks
300x200 3

Responsive Editor Images Demo #2 - CSS Class & Media Query

This is the original version of the image! It is 275x265. By default the editor adds the width and height properties to the inline style attribute.

In this demo a style has been added to the editor.css file:

@media (max-width: 760px) {
    .responsivePlease {
        width: 100% !important;
        height: auto !important;
    }
}
 


 

Image has been adjusted to be 40% larger. The width and height values are unchanged. In this scenario, the editor could add a css class to the image tag when a "Make Responsive" checkbox is checked.

Regardless of the image styles and attributes, the css rule will always apply over top.

 

 

 

 

 

 


 

This scenario, the image has been resized using the resize handles in the editor display. For some reason, CKEditor populates the width and height html attributes rather than the inline styles when using the drag handles.

This should act the exact same way as the previous scenario, where the css class completely overrides the image's html attributes.