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

Top Individuals
Stephen Hermer

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
Please look at the text on this image and type it, exactly as shown, into the field provided.
300x200 4
300x200 4
300 x 200 6
300 x 200 6
300x200 2
300x200 2
300 x 200 5
300 x 200 5
300x200 3
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.