#28475 closed enhancement (invalid)
Resizing Images in WYSIWYG should use inline css instead of html width and height
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | 3.9.1 |
Component: | TinyMCE | Keywords: | |
Focuses: | Cc: |
Description
When using the new feature of resizing images directly within the WYSIWYG editor, Wordpress is change the normal html Width and Height attributes
For instance, this
<img class="aligncenter wp-image-231" src="domain/image.jpg" alt="GreenhouseLoft" width="1024" height="1024" />
becomes this
<img class="aligncenter wp-image-231" src="domain/image.jpg" alt="GreenhouseLoft" width="853" height="853" />
Seemingly this is how it should work, but with many themes and theme frameworks such as Genesis using Twitter Bootstrap and other CSS Resets as their base, these calls are over ridden by a simple CSS line like the following which is very convenient for the rest of the site.
img { height: auto; width: auto; };
I would like to suggest that the resizing of the image should take place in an inline style element which would override the default css above. For instance
<img style="width:853px; hieght:853px;" class="aligncenter wp-image-231" src="domain/image.jpg" alt="GreenhouseLoft" width="1024" height="1024" />
This will change nothing with themes that don't have a CSS reset that calls width and height auto on images but will help to fix the problem with themes that do. As it is currently, resizing images in the editor with the new click and drag function causes no actual visual change on the front end of the site.
Change History (3)
#2
@
11 years ago
- Resolution set to invalid
- Status changed from new to closed
okay, that does make sense, I do see that twitter bootstrap and others are now doing images that way, I was sure an older version was doing it how I mentioned above. I will change my default theme to that and everything should be good to go.
Thanks for the comment this can be closed
This would cause issues with responsive themes. The standard responsive image css:
Would break as the height value would be overridden by the inline css and lead to squished images. Themes should be able to override the width and height values without resorting to
!important
, theme developers just need to be conscious of users setting image sizes and only override when necessary.