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 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    problem with resizing image

    i'm having major brain fart. i have a large image on a page. that's it. the image is in landscape orientation, and i need it to resize to fill the screen without distortion.

    i tried style="max-height:100%", which worked great on computer monitor, but caused horizontal scrolling on mobile browsers. so i tried style="max-width:100%", and that worked great on mobile browsers, but caused vertical scrolling on computer monitors.

    i need it to fill either the height or the width (whichever is smallest) and center itself on the screen otherwise.

    whhhhhy, oh why, can't i figure this out?

    i'm certain it's simple and i'm just missing it, but i'd love to get steered in the right direction. thanks for any help you can offer...

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    Try using background-size:contain; Don't use a width or a height. If you still have a problem post all css for the image.

  • Users who have thanked sunfighter for this post:

    danllinehan (05-05-2013)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    that works great! thank you!


  •  

    Posting Permissions

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