CSS to make images resize and fit any screen the same

Question

I've been working with a temp page at http://www.flywavez.com but I can't get the image to resize and be the same in all screen resolutions. On the iPhone it cuts the girl off before the waist, and it fits perfectly when viewed on my 19" laptop screen with the res at 1366 x 768, and even when I fed the video to my 55" TV via VGA from my laptop. However when I view at larger monitors with greater resolution, there is a big space and obvious view where the image size ends. I thought I had resizing CSS with /* Tablet Landscape */ @media screen and (max-width: 1060px) { #wrapper { width:67%; } }

    /* Tabled Portrait */
    @media screen and (max-width: 768px) {
        #wrapper { width:100%; }
     }

    /* Tabled Portrait */
    @media screen and (max-width: 768px) {
        #wrapper { width:100%; }
     }

     /* iphone */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        img { max-width: 100%; }
    }

    /* ipad */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
img { max-width: 100%; }
    }

I want this image to display on all resolutions as it does when seen on the 1366 x 768.

Thanks for any help.

score 27 · Accepted Answer · edited Aug 22 '17 at 14:31

27

I think it is fundamentally impossible to achieve what you are trying to do without losing image ratio, which is probably undesirable. Have you considered using the 'background-size' property? The css below achieves a pretty good look:

body {
    background: url('images/example.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

You can see it here: http://jsfiddle.net/DTN54/

edited Aug 22 '17 at 14:31

Phil

6,561
4
44
69

answered Nov 01 '13 at 04:21

onestepcreative

541
5
13

sorry so late getting back with you, but it seems as if only half of her body shows. (I want the legs as well) haha. – abtecas Nov 04 '13 at 22:47
actually that did work. I just looked at the fiddle and saw the image. Hopefully it'll scale down to the other size rez's though. checking on my iPhone now. – abtecas Nov 04 '13 at 22:58

score 7 · Answer 2 · edited Nov 02 '17 at 10:37

cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

contain This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area. So try using contain instead of cover

100% This will scale 100% to both of height and width without any cropping.

body {
        background: url('images/example.jpg') no-repeat fixed;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }

score 0 · Answer 3 · edited Dec 13 '16 at 12:09

0

Basically, this is all you need:

body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}

edited Dec 13 '16 at 12:09

deChristo

1,860
2
17
29

answered Dec 13 '16 at 11:40

ene sorin

1

CSS to make images resize and fit any screen the same

3 Answers3

Linked