Grow your CSS skills. Land your dream job.

auto resize image to fit in the window

  • # February 7, 2013 at 6:32 pm

    I have some problems with my website. It’s a simple one page website.

    1 problem it’s that i want the images to auto resize when they pop out, but to resize them to fit the most as posible of the ” container ” ” window ”, or the phone / tablet available view space, only when the available view space it’s smaller that the image itself. For example i have the image from the ” Tarifas ” button which pops out when you click it. If i resize de browser window to be smaller that the image, i want that the width of the image to be exactly like the width of the browser window, to fill it, and resize automatically if the browser window gets smaller.

    Another problem it’s that if the browser window it’s small, and i click one image, for example the image from ” Tarrifas ”, or the images from the links under ” Servicios ”, the images appear ” cut ”, from the left, and i see like 3/4 of them.

    And the last problem is with the background image. If i resize the browser window, the background moves to the left automatically, while the other elements of the website remains static. So i want the the background image stay static as well.

    my website is: http://aqualica.es

    I also added the layout.css file and index.htm

    Any help is appreciated. Thank you very much in advance.

    the layout.css: http://pastebin.com/2yAbLQWW the index.htm: http://pastebin.com/vR777VBR

    # February 7, 2013 at 6:54 pm

    @adzzi Well, to make images respond to size changes of their parents, here’s an example: http://codepen.io/srig99/pen/cfpDI. Also, did you want an example of full page backgrounds too? In case you did, here: http://codepen.io/srig99/full/olrJL.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".