CSS to resize image to fit window continuously

HTML & CSS
1

Hi,

If you look at this webpage:

http://www.oblivionstate.com/forum/topic/10156-collyweston-bomb-store-dec-2015/

As you resize the window, the image resizes automatically to fit the window.

How can I achieve this?

Matt.

2

If you examine the code with Inspect Element, you will see the image has max-width: 100% and it is contained by a block element <p>, which has full width (responsive) by default.
Though a <p> element is probably not the most appropriate block container for an image.

3

HI,

If you are talking about the background image on the body then this is achieved by using the background-size property with the ‘cover’ value.

e.g.

body.ipsfocus_bg3 {
background-color: #404040;
    background-image: url( forum/uploads/monthly_2015_12/IMG_6315.jpg.85f31e8179184a1f551ec0d4d8f4c50a.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: 50% 0%;
}

The image is also fixed to the background using background-attachment fixed which means it won’t scroll away.

The image is then centred with background-position: 50% 0%;to make sure the focal point is not out of view.

Background-size:cover automatically ensures that an image will cover the element fully while maintaining aspect ratio. It does this by manipulating height and width and until both cover the element’s background. This means that for a wide letterbox image with small height the image would be scaled quite wide until the natural aspect height fits the element it is applied to (and vice versa for tall images).

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.