0

I have an image of that has a height of 480px. On my Macbook it looks OK but when I go to my 30 inch monitor obviously there is a huge space in the bottom.

What can I do to make sure that the 480px will always be in relation so the size of the user's screen?

I did some searches and it seems that using background-image: cover or background position I can do some stuff but highly likely it's not what I am looking for. What can I do tackle this issue?

ariel
  • 2,962
  • 7
  • 27
  • 31

2 Answers2

1

One way to achieve this is to place the image in a container that can scale with the page.

Height is a hard attribute to scale, but you can achieve it as long as all of the parent elements have a specified height as well. You can use CSS code such as 

height:40%;

to scale elements.

Scale the page's height here to see for yourself: http://jsfiddle.net/L7uWd/

James Bruckner
  • 909
  • 7
  • 10
0

Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.

Set the image height to some percentage instead of pixel, that will automatically handle with the size of the screen.

Surama Hotta
  • 130
  • 3