with the image properties being set to max-width: 100% on img.adaptive there is nothing keeping the height proportional.

height: auto needs to be added so that the original image's proportions are kept during re-sizing.

Comments

spotzero’s picture

spotzero CreditAttribution: spotzero commented
Status: Active » Needs review

I've committed your fix to the dev branch. Can you test it and let me know if everything is working correctly now?

Thanks!

spotzero’s picture

spotzero CreditAttribution: spotzero commented
Status: Needs review » Fixed

Marking as fixed.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

webatelier’s picture

webatelier CreditAttribution: webatelier commented
Status: Closed (fixed) » Active

ISSue still persists in CKEditor ...
the
img.adaptive {
height: auto;
}
is being overwritten by the inline height attribute of the image
changing the css in
img.adaptive {
height: auto !important;
}
works ...

minorOffense’s picture

minorOffense CreditAttribution: minorOffense commented

I wouldnt recommend adding the important because that kills the cases where someone would want the height to be different. (Not a lot of cases, but it could happen). Also if there's a with or height attribute on the image (which some editors may add) nothing in the css is going to help against that.

If you need the !important in you case, add it to your own theme or adjust the settings for ckeditor to not add in those styles.

spotzero’s picture

spotzero CreditAttribution: spotzero commented
Status: Active » Closed (won't fix)

The !important prevents adaptive images from being altered by other css or themes. It's possible someone would want to set the height of an images, and this would prevent them from doing that.

Also if there's a width or height attribute on the image (which some editors add) nothing in the css is going to help.

If you require the important due to the set of modules and/or theme on your site, you're better off adding it in your own theme.