Width: 100% not working in portrait on Featured Image in Custom Theme

So 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.

Please, oh please, somebody save me from my portrait problem.