Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    51
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Can't Get CSS Resize Images to Work

    Hello,

    I am in the process of converting a page based on a table layout. One of the items I'm having a problem with is CSS for resizing an image doesn't work. I need to resize several images - so using the background element won't work for me.

    So, I have several images on the page that are referenced like this: <img
    Code:
    src="../images/image1" width="143" height="82" />
    In trying to rework this with CSS, I've come up with this:

    Code:
    reviewimage {  //also tried reviewimage img {
    padding: 5px 15px 0 0px;
    width: 143;
    height: 82;
    float:left;
    vertical-align:text-top;
    }
    Then use one of the following to display the image:

    Code:
    <div class="reviewimage"><img src="../images/image1" /></div>
    <img class="reviewimage" src="../images/image1" />
    Neither of these work. The padding, alignment, etc. work - but not the resizing - Why???

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello billatl,
    Your inline style is correct in using numbers only. I think browsers assume px measurements here. It's incompletely cut/pasted here so I don't know that it's not working because your format is wrong... Should be something like this -
    Code:
    <img src="../images/image1.jpg" alt="description" width="143" height="82" class="reviewimage" />
    Your CSS does need a measurement specified. Add the bits highlighted in red -
    Code:
    .reviewimage /*also tried reviewimage img*/ {
    padding: 5px 15px 0 0px;
    width: 143px;
    height: 82px;
    float:left;
    vertical-align:text-top;
    }
    So, both your inline and your CSS image sizes are the same. What are you trying to resize from and why can't you actually resize the image so as not to make the end user download a large image they will never see?
    Last edited by Excavator; 10-29-2009 at 01:02 AM. Reason: added the class after reading oesxyl's post
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by billatl View Post
    Hello,

    I am in the process of converting a page based on a table layout. One of the items I'm having a problem with is CSS for resizing an image doesn't work. I need to resize several images - so using the background element won't work for me.

    So, I have several images on the page that are referenced like this: <img
    Code:
    src="../images/image1" width="143" height="82" />
    In trying to rework this with CSS, I've come up with this:

    Code:
    reviewimage {  //also tried reviewimage img {
    padding: 5px 15px 0 0px;
    width: 143;
    height: 82;
    float:left;
    vertical-align:text-top;
    }
    Then use one of the following to display the image:

    Code:
    <div class="reviewimage"><img src="../images/image1" /></div>
    <img class="reviewimage" src="../images/image1" />
    Neither of these work. The padding, alignment, etc. work - but not the resizing - Why???
    because you set the height and width for the container, the div element, not for img element.

    best regards

  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    51
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello billatl,
    Your CSS does need a measurement specified. Add the bits highlighted in red...
    ...as not to make the end user download a large image they will never see?
    Geez, it's always the little things. I set the pixels and it worked fine. As to why - well, the larger image is viewable elsewhere on the site. Better resize an existing image that may be in cache than have two separate images and get dinged twice.

    Thanks for your help.


  •  

    Posting Permissions

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