Responsive image with floating and full width

Question

I am working on a flexible layout. See this script or code below, for example: http://jsfiddle.net/jasonpalter/GBygZ/

The image has a left margin - necessary if it does not cover the entire width of its container. But when the image covers the entire width of the container, the left margin needs to be removed. We can accomplish this simply with a breakpoint, but the image itself, if it is dynamic, and we do not know what its dimensions are.

Is there an automatic way (CSS or less preferably javascript) to ensure that the indent of the image can disappear when the image spans the entire 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 need to create an Image object, set its src attribute to the image source, and then pass a function that captures the image sizes for the onload image object attribute. Using this information, you can bind a function to a resize window event, which removes the fill of the image when the image spans the entire width of the container and restores it when the opposite happens.

Unfortunately, there is no way in CSS to do this, although the ability to simply write the img:not(:resized) would be nice!

Answer 2

In my experience this would be impossible without knowing the width of the image, only in CSS. 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 check this in the fiddle, it will not work, since the window is the width of the browser window, not the width of the edited column assigned to the script.