www.webdeveloper.com
Results 1 to 10 of 10

Thread: img { max-height, max-width }??

  1. #1
    Join Date
    Jul 2006
    Posts
    34

    img { max-height, max-width }??

    Ok I've created an online photo album that gets its images from a database. I have a thumbnail gallery on the right, that is filled by first querying the database... and naturally each thumbnail you click on it displays the full sized image within a div using a javascript function.

    My question is this...
    I want to specify a maximum height and width for this image.

    I've tried:

    div.Display{
    max-height: 480px;
    max-width: 640px;
    }
    and...the same for the img selector, as well as a td and table selector and still no luck.

    I want the full size image to be displayed BUT not if it is bigger than 640X480 I want the height and width to be capped at that.


    Any help would be greatly appreciated.
    Thanks in advance.

    Nick

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Code:
    div.Display{
      max-height: 480px;
      max-width: 640px;
      overflow: hidden;
    }
    This will work in Standards browsers, but IE-Win will fail. What you really want to do is resize images that are uploaded to the server. This can be done automatically by PHP scripts, for example. Then CSS workarounds don't have to be used.

  3. #3
    Join Date
    Jul 2006
    Posts
    34
    Hmmm,
    Here's the thing... The images aren't actually being uploaded to MY server. The database contains the image URLs. So I wouldn't be able to resize them. Is there any other workaround to make this work in IE?

  4. #4
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    You could do something with JavaScript.

    Or you could use this technique: http://www.svendtofte.com/code/max_width_in_ie/
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  5. #5
    Join Date
    Jul 2006
    Posts
    34
    Ok, that tutorial didn't quite work. At least not for <img> whos src is being changed.

    However,
    I have a JS function that is changing the src of the img...I'm using
    document.getElementById['mainImg'].src = URL
    Now would there be a way to something like this to the same function??


    if( document.getElementById['mainImg'].width > 640 ){
    document.getElementById['mainImg'].width = 640;
    }

    and so on with the height as well??



    Thanks in advance
    Nick

  6. #6
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Yes, except you need to use parentheses instead of square brackets.
    Code:
    document.getElementById('mainImg')
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  7. #7
    Join Date
    Jul 2006
    Posts
    34
    Ok I'm making progress but still no go...

    I've written 2 Javascript functions:

    Code:
    function changePicture(imgURL, caption){
    	document.getElementById('mainImg').src = imgURL;
    	document.getElementById('mainImgURL').innerHTML = caption;
    	checkImgSize();
    }
    function checkImgSize(){
    	if(document.getElementById('mainImg').width > 640){
    		document.getElementById('mainImg').width = 640;
    	}
    	if(document.getElementById('mainImg').height > 480){
    		document.getElementById('mainImg').height = 480;
    	}
    }

    So onClick() I call changePicture, and then checkImgSize is called within that function to resize it...however it only works once. The first thumbnail I click on, caps the size to 640x480 IF it exceeds 640x480. Which is what I want. But if it satisifies either of those conditions, and sets the height or width, it stays that height or width no matter what thumbnail I click on thereafter.... Thus images that are lets say 50x50, are then stretched to 640x480.

    Sigh...

    Any suggestions?

  8. #8
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    You don't want .width and .height. What you really want is .offsetWidth and .offsetHeight. Then to set the width of the image, use .style.width and .style.height. That will be a more cross-browser method of doing what you want.

    The real problem may lie in how quickly the computer is reading the image data into the DOM. You might want to use a setTimeout() function to wait one half to one second before firing your function to check the image size.

  9. #9
    Join Date
    Nov 2010
    Posts
    1

    img as a div background

    Are you using PHP?
    It doesn't matter.
    show the image as a new div, whose background is the image,
    with position center center

    list($width, $height, $type, $attr) = getimagesize($imagepath);

    if($width > $maxImgWidth)
    $width = $maxImgWidth;

    if($height > $maxImgHeight)
    $height = $maxImgHeight;

    $disp = '<div style="width: '.$width.'; height: '. $height. '; background: url(' . $imageUrl . ') no-repeat; ';
    $disp .= ' background-position: center center; "> &nbsp; </div>';...etc

    echo $disp;

  10. #10
    Join Date
    Aug 2011
    Posts
    1

    Perfect

    Quote Originally Posted by pittendrigh View Post
    Are you using PHP?
    It doesn't matter.
    show the image as a new div, whose background is the image,
    with position center center

    list($width, $height, $type, $attr) = getimagesize($imagepath);

    if($width > $maxImgWidth)
    $width = $maxImgWidth;

    if($height > $maxImgHeight)
    $height = $maxImgHeight;

    $disp = '<div style="width: '.$width.'; height: '. $height. '; background: url(' . $imageUrl . ') no-repeat; ';
    $disp .= ' background-position: center center; "> &nbsp; </div>';...etc

    echo $disp;

    OMG!!!! Thank you sooo much for that! This was the first forum i went to for the question and it was answered right away. Im using php and setting the picture as the div background crops any additional height and width... PERFECT....

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles