1

I have a website when on the main page there is a full screen image. Image aspect ratio is 16:9 (1920x1080px).

Now, if everything is displaying very well on screen using 16:9 aspect ratio, when I run this site using 4:3 screen (lets say : 1280x1024px) I got blank space below the image.

I'm using skdslider.

Div that contains image has CSS:

.skdslider {
 width:100%;
 position: relative;
 display: block;
 overflow:hidden;
 height:100vh !important;
}

This is the image CSS:

.skdslider ul li img {
    width: 100%;
    height:auto;
    border:0;
}

The element hierarchy is like below:

.skdslider > ul > li > img

What I'm trying to achieve is to remove this blank space on 4:3 aspect ratio screen. It's like - scaling somehow outside div height to this inner image height so there won't be white gap.

Could not reach it by any known to me ideas. Any suggestion? Once again, I'm using skdslider, priority is for 16:9 screen where images are 100% width / 100% height. On 4:3 screen image don't have to be 100% height, but I need to remove somehow this blank space.

Marcin
  • 994
  • 2
  • 11
  • 26
  • 3
    Set it as a background image and use the [background-size](http://www.w3schools.com/cssref/css3_pr_background-size.asp) property (probably `cover` or `contain` in this instance). – APAD1 Jun 24 '15 at 17:24
  • So it's okay if you either ignore aspect ratio or "cut off" parts of the image left and/or right? – connexo Jun 24 '15 at 17:24
  • check this page: https://css-tricks.com/perfect-full-page-background-image/ – Dan Beaulieu Jun 24 '15 at 17:27
  • possible duplicate of [When to use IMG vs. CSS background-image?](http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image) –  Jun 24 '15 at 19:42
  • 1
    Closer duplicate: [CSS: Full Size background image](http://stackoverflow.com/questions/14059429/css-full-size-background-image) –  Jun 24 '15 at 20:00

0 Answers0