how to make an image change when on different resolutions

Question

I currently have a header which is of an image (the width = 1920px and height = 250) It sits at the very top of the page, and looks well with some resolutions. But when i got to a resolution that actually changed my screen size, the image is still 1920px and then allows me to scroll. Is there a way of making it scale down to fit the page?

do you try set `width` of `image` is `100%`? – Neo Sep 09 '15 at 07:26 — Neo, Sep 09 '15 at 07:26
Please share your code – Saswata Sundar Sep 09 '15 at 07:28 — Saswata Sundar, Sep 09 '15 at 07:28
style="max-width:100%;height:auto;" – Prabhat Singh Sep 09 '15 at 07:31 — Prabhat Singh, Sep 09 '15 at 07:31

Domain · Answer 1 · 2015-09-09T07:35:59.063

0

You may use the responsive image code that is:-

img {
  width: 100%;
  height: auto;
}

Else if you have images for multiple resolutions you are recommended to use media Queries:-

//set width as per requirement

@media (max-width: 900px) {
  background-image: url(img/cover.jpg);
}

edited Sep 09 '15 at 07:35

answered Sep 09 '15 at 07:30

Domain

11,562
3
23
44

score 0 · Answer 2 · edited Sep 09 '15 at 10:33

0

How are you showing the image in the header? Using img tag or using background-image CSS property?

If you are using <img> tag, then you need to set max-width: 100%;
If you are using background-image property, then you need to set background-size: 100% auto;

Hope this help

Thanks

edited Sep 09 '15 at 10:33

Vikram Deshmukh

12,304
4
36
38

answered Sep 09 '15 at 07:31

user1903471

1
2

score 0 · Answer 3 · answered Sep 09 '15 at 07:31

You can make your image responsive.

You can use bootstrap and add class for your image.

e.g

<img src="xyz.png" class="img-responsive">

OR

You can manually try to make your image responsive with CSS rules.

e.g

max-width:100% !important;
max-height:100% !important;
display:block;

score 0 · Answer 4 · edited May 23 '17 at 11:52

You will have 2 things here.

As the screen size differs your image should get fit in the window.
You need to maintain the aspect ratio of the image in responsive design, otherwise your image will be stretched out (It is a challenge to maintain aspect ratio in responsive design).

For the first one you can use width:100% and height:auto also max-width:100% to make sure it does not cross your section.

If you are designing based on some particular resolution then use media query

@media (max-width:768px)
{
  width:... // define your width based on the resolution
}

Now the 2nd point : How to maintain aspect ratio. Follow the steps here: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

Also, found a stackoverflow post, which will be useful to you :CSS force image resize and keep aspect ratio

how to make an image change when on different resolutions

4 Answers4