I'm trying to create a fullscreen, mobile friendly theme which displays Featured Images of posts as big as they can be with no cropping. This means in landscape displaying them with height:100%; width:auto;, but in portrait displaying them width:100%; height:auto. (As in many iOS apps.)

Trouble is, I'm having a real bugger of a time getting this to work in WordPress. When I developed the theme as a static HTML test site, it all worked completely fine. But for some reason, when I converted the site to a theme, it started ignoring the width:100% in portrait.

I know it's not the media query itself that is broken/being ignored, because the nav menu which is within the same portrait media query works fine.

Initially I thought WordPress' inline Image sizes had overridden my responsive ones (which would make sense, cascade-wise) but that doesn't seem to be the case as the image displays fine with height:100% in landscape viewports. In portrait, it seems to be listening to the height:auto command.

It's literally just the width: 100%; command that is being ignored.

I've also added in max-width: 100% just for good measure, and tried it with !important in various places. No effect.

Here's the code so you can see it's not a silly missing semicolon.

#content img {
width:100%;
max-width:100% !important;
height:auto;
}

I have also validated my CSS and nothing seems to be wrong there.

And here's the HTML

<div id="content">
<div title="Click to flip" class="sponsor">

<div class="sponsorFlip">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>

</div>

<div class="sponsorData" style="display:none">
<?php
if( class_exists( 'kdMultipleFeaturedImages' ) ) {
kd_mfi_the_featured_image( 'featured-image-2', 'post' );
}
?>
</div>

</div>
</div><!-- End div #content -->


Any help on this, very much appreciated! Pulling hair out over this one.