Images in responsive html email - outlook

Question

My email template has two media queries. I have a call to action button as an image. When the code is rendered in Outlook the image-button in the larger media query looks fine, but the image widthxheight in the smaller media query does not change when viewing the rendered email in Outlook It does render fine for other mail clients, OS).The native size of the image is 2x that of the declarations in the CSS.
I've tried -
max-width in the CSS.
width attribute in the HTML (but this applies across all media queries).
CSS -
#media screen {
.image-responsive {
width: 320px;
height: 68px;
}
#media (max-width: 520px) {
.image-responsive {
width: 260px;
height: 56px;
max-width: 260px;
}
HTML -
<p style="text-align: right;margin: 0;padding-top: 20px;">
<a href="#" style="color:#fff; text-decoration: none;">
<img src="URL/images/btn-securepayment-2x.png" alt="Secure Payment" class="image-responsive">
</a>
</p>

Answer 1

The max-width element is unsupported in Outlook.
Outlook uses Word for rendering message bodies, so you need to follow strict rules if you want your markup to be rendered correctly. You may find the list supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

Answer 2

Outlook 2007+ unfortunately doesn't media queries (although older ones did). As Eugene mentioned, Outlook 2007 changed their rendering engine from IE to MS Word which causes rendering issues for very commonly used CSS as well.
Below is an example of how media queries can be used to change elements in an email when viewed on different screen sizes.
#media screen and (max-width: 520px) {
p {
text-align: left !important;
margin: 10px !important;
padding: 0px !important;
background-color: #000000 !important;
}
}
<p style="text-align: right;margin: 0;padding-top: 20px;color:#ffffff; background-color:#ff0000;">
wow this is fun
</p>
Lastly, here is a resource from Campaign Monitor which gives in details which CSS works on which email client.