Make img float left if wider than viewport

I need help to make a <img> float to the left, if it is wider than the viewport.

My html looks like this :
<div id='main><img id="fbimg"/></div>

I load "fbimg using JQuery - but if the img is wider that the document I want it to float to the left - making the right (not the left) part of the image visible, so the left part of the img is pushed to the left out of the #main's left border.

I guess I need some CSS also - overflow:hide or similar ?

See my JQuery JS code that loads the image :


$.getJSON("json.php",{action:"getFragtbrev"}, function(data){          
          var fn = "/i.php?fn="+ data[0].filename;
          //$("#main").html("<img src='"+ fn +"' id='"+ data[0].docid +"'/>")
          $("#fbimg").attr("src", fn).load(function(){
            enterlimit = data[0].enterlimit;  
            $("#fbimg").fadeIn(200);
            $("#wait").fadeOut(500);
            $("#tt").val("Indtast "+ data[0].enterlimit +" tal...").focus().select();
          });         
      })

Open in new window

LVL 2
trg_dkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hpiersonCommented:

Nest a div that contains only the image, and then set the LEFT MARGIN to a negative enough value that the image will fit.and float the div containing the image RIGHT! You can change the CSS using javascript, for example

<div id="imagediv"></div>

Open in new window


and in javascript

var element = document.getElementById("imagediv");
element.innerHTML = (your code to generate image tag)
element.style.marginLeft = (calculate image width - viewport width - 10) //this line and next only if you need to
element.style.cssFloat="right";

Open in new window


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

If you don't already have a way to determine image size, you can use this suggestion:

<script language='JavaScript'>
function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
alert ('The image size is '+width+'*'+height);
}
</script>

<IMG id='demoImg' src="http://www.goldenstudy.com/bbs/uploadimg//20060228144500426.jpg">
<BUTTON onclick="getImgSize(document.getElementById('demoImg').src);">Get Image Size</BUTTON>

Open in new window


demo:
http://www.goldenstudy.com/bbs/article_detail.php?message=25&table=table_WebDesign

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
hpiersonCommented:
sorry, that line should have been:

element.style.marginLeft = (calculate viewport width - image width - 10)

Open in new window


to make the left margin negative enough that the right hand side of the image will fall within the viewport

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WilliamStamCommented:
if ($("img").width() > $(window).width() ) {
 alert("ha its bigger")
}
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.