Mailspring/static/email-frame.less
Ben Gotow e2a1658ab3 fix(email-styles): Remove img height:auto; causing images to stretch based on their intrinsic size
We constrain images to a max-width of 600px. We have logic to change width and height attributes of inline attachments when both specified (and larger than 600px). This `height:auto` flag causes the image below to render at 600x600 because it's a 1x1 image:

<img src="http://image.lyftmail.com/lib/fe6915707166047a7d14/m/1/spacer.gif" height="1" width="600" style="display: block; width: 600px; min-width: 600px;" border="0">

I think the height:auto case only happens when A) the image is more than 600px wide B) the image has a hard-coded height and not a hard-coded width. In this case our max-width rule will change the width and the height will be fixed. I think we should disregard this case unless we find scenarios where it happens.
2015-08-10 14:12:38 -07:00

67 lines
1 KiB
Plaintext

@import 'variables/ui-variables';
@import 'ui-variables';
.ignore-in-parent-frame {
html, body {
font-family: "Nylas-FaktPro", "Helvetica", "Lucidia Grande", sans-serif;
font-size: 16px;
line-height: 1.5;
color: @text-color;
background-color: transparent !important;
border: 0;
margin: 0;
padding: 0;
-webkit-text-size-adjust: auto;
word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;
}
strong, b, .bold {
font-weight: 600;
}
body {
padding: 0;
margin: auto;
max-width: 840px;
overflow-y: hidden;
word-break: break-word;
-webkit-font-smoothing: antialiased;
}
pre {
white-space: normal;
}
a {
color: @text-color-link;
}
a:hover {
color: @text-color-link-hover;
}
a:visited {
color: darken(@text-color-link, 10%);
}
a img {
border-bottom: 0;
}
body.heightDetermined {
overflow-y: hidden;
}
div,pre {
max-width: 100%;
}
img {
max-width: 100%;
border: 0;
}
}