Orchard and responsive design

[orchardbot]

@IvanFeric created: https://orchard.codeplex.com/workitem/19188

Hi,

This is not really a bug but rather annoyance and a suggestion.

When creating a web with responsive design, the basis of mobile design is to dynamically resize images by adding this CSS rule:

img { max-width: 100%;

}

This way, when the screen is smaller than the width of picture, it resizes to smaller width so you can still see the whole image without zooming out.

Now, when adding images through Orchard Media Picker (inside Tiny MCE or through the picker itself), image width and height boxes are automatically populated, and once you select Insert or Update, the HTML gets populated with .

This completely breaks the responsive design, since width is being correctly resized, but height becomes the original image height instead of scaled down height.

While it is annoying to remove heights every time I need to add a new image (and I often forget about it, and change it once I realize how the mobile site looks) on my private site, it completely ruins the experience to every customer with the responsive design. They call it a bug and, since they're not that technical, they forget to remove heights most of the times. This is even more of an issue when there are more than 1 person doing site updates.

My proposal is to add a setting in Settings -> Media section which would let you disable automatic width and height population inside the Media Picker.

Thanks!

[orchardbot]

bgano commented:

You can get around this issue by adding height: auto; to your image CSS. This will overrule any height setting specified in the height attribute.