Changing the image height based on screen resolution

[newcoder1010]

Hi,

 

 

 

I have this css:

 

 

@media (min-width: 993px){
/* I have two other regions before this */
.views-slideshow-cycle-main-frame-row-item .field-content img { height: 650px;     min-height: 650px;     width: 100%; }
}

I visited the slideshows in a screen which resolution is 1920 x 1080, it looks good. I can see the entire image once I visit the page without scrolling down.

 

 

I visited the slideshows in another screen which resolution is 1366 x 768, I can see the part of the image. To see the rest of the image, i need to scroll down to see the rest.

 

 

I am not sure how to solve this problem. How can I specify the height for resolution is 1366 x 768 so when people visit the page they can see the entire image on the home page?

 

http://godrupal.info

 

 

Thanks.

 

[dsonesuk]

If all browser menus, title bars, status bars were uniform and identical in all broswers, then yes! You maybe could adjust to fit in all browsers, but since this is extremely unlikely to be the case, it would be difficult to achieve.