CSS image resize horizontally

Question

div.image {
    background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
    background-position: center;
    background-repeat: no-repeat;
    width: 500px;
    height: 500px;
}

I use the above css code to diplay a 500x500 image. It shows well on screen however, is there a way that when I resize the window vertically then the image to not resize at all (scrollbars appear) but when I resize the window horizontally to resize too so that its new width fit the screen? Thanks

i think this is exactly what you're looking for-- [Here you go](https://stackoverflow.com/questions/2049845/css-fixed-position-on-x-axis-but-not-y) — maximus1127, Aug 21 '17 at 05:25
You can use any framework or media query to handle the size...or use % while specifying the width and the height. — Ashish sah, Aug 21 '17 at 05:25

score 1 · Accepted Answer · edited Aug 21 '17 at 05:25

1

Dont specify width and height in PX Insted use %

div.image {
    background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
    background-position: center;
    background-repeat: no-repeat;
    width: 50%;
    height: 50%; /* both as much you want */
}

Or else use media query.

edited Aug 21 '17 at 05:25

Rahul

4,294
1
10
12

answered Aug 21 '17 at 05:24

Ashish sah

755
9
17

CSS image resize horizontally

1 Answers1