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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    css scaling images

    i've been trying to make my website look roughly the same for every screen resolution, but one problem i've been running into is the scaling of the images..

    i've been using the code/style below and it does work, but only in firefox.. where it scales the width of the images down to 30% of the total window size,
    in safari/chrome however it scales the images down to 30% of its original width.. which is something i don't want..

    does anyone know of a solution to this?



    .resize {
    width: 30%;
    height : auto;
    }

    .resize {
    width: 30%px;
    height : auto;
    }

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Try removing the height styles. I don't think you need it.

    In css, when you specify either a % width or height for an <img> it will size it to that % width or height of the img's parent element and the other dimesion will be sized automatically to maintain the original aspect ratio of the image.

    It would help if you post your code so we can see what is happening.

  • #3
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    The % size means it's 30% of the parent element. I'm guessing if it resized at all, it was just some firefox magic and that the parent element was expanding. Which is weird, the height and width of the parent need to be defined for it to work i thought. But anyway, it's a pretty commonly asked question, and you can't do it. Not with html or css anyway. I thought I saw somewhere you could do it with php, asp, some server side languages. But otherwise no.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello,

    I am displaying an image on a few pages. The image size is 50 px
    height and 50 px width.
    In some pages I need the image to be 30x30 px in others 40x40 px and
    in others 50x50px.

    Can I scale the image using CSS?

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by alma111 View Post
    Hello,

    I am displaying an image on a few pages. The image size is 50 px
    height and 50 px width.
    In some pages I need the image to be 30x30 px in others 40x40 px and
    in others 50x50px.

    Can I scale the image using CSS?
    yes you can
    Quote Originally Posted by bullant View Post
    In css, when you specify either a % width or height for an <img> it will size it to that % width or height of the img's parent element and the other dimension will be sized automatically to maintain the original aspect ratio of the image.


  •  

    Posting Permissions

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