Responsive image with floated and full width layout - css

Question

I'm working on a responsive layout. See this fiddle, or code below, for an example: http://jsfiddle.net/jasonpalter/GBygZ/
The image has a left margin -- necessary in when it's not spanning the full width of the its container. But when the image spans the full width of the container, the left margin needs to be removed. We can accomplish this simply with a breakpoint, but the image itself if dynamic, and we don't know what its dimensions will be.
Is there an automatic way (CSS, or less preferably javascript) to ensure that the image padding can disappear when the image spans the full width of its container?
HMTL
<div class="pod">
<div class="img-right">
<img src="http://placehold.it/460x220" width="460" height="220" />
</div>
<h3>Lorem Ipsum</h3>
<div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</div>
CSS
.pod {
overflow: hidden;
padding: 5px;
border: 1px dotted #ccc;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.4;
}
.img-right {
float: right;
}
.img-right img {
box-sizing: border-box;
padding: 0 0 0 5px;
max-width: 100%;
height: auto;
}

Answer 1

To do this in javascript, you would need to create an Image object, set its src attribute to the image source, and then pass a function that grabs the images dimensions to the image object's onload attribute. With that information, you could bind a function to the window's resize event that strips the image's padding when the image spans the full width of the container and reinstates it when the opposite happens.
There is unfortunately no way to do this in CSS, though being able to just write a img:not(:resized) selector would be nice!

Answer 2

In my ecperience this would not be possible without knowing the width of the image, in CSS alone. A jQuery solution would be very simple
DEMO http://jsfiddle.net/kevinPHPkevin/GBygZ/5/
var windowWidth = $(window).width();
if ($('#image').width() < windowWidth) {
$('#image').css('padding-left', '10px')
}
When you test this in a fiddle it will not work as the window is the browser window width, not the width of the editable column that is assigned to the fiddle.