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. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,282
    Thanks
    30
    Thanked 863 Times in 861 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.

  3. Users who have thanked sunfighter for this post:

    danllinehan (05-05-2013)

  4. #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
  •