2

I'm working on full-screen background slideshow.

My question is: How can I set an image to take up the full screen and maintain aspect ratio?

Min-height and min-width work, but do not keep the aspect ratio when both are set. I want the image cropped with the full coverage of the container.

Diagram of Problem

I believe I need to have one dimension fixed, and the other to auto; given that the image dimensions and view-port dimensions are variable, I'm thinking I would need at least 2 sets of CSS rules, and javascript to calculate which one should be used. Is there a simpler way to do this?

I've drawn up a diagram illustrating my problem. The dark colors are the original images. The median colors are the desired effect. The lighter colors are the desired overflow from the scaled up image.

I'm working on a Ken-Burns effect full-screen background. I know I have to worry about transitions, but I'm hoping that I can handle that after.

Tutorial for Ken Burns Effect:
http://cssmojo.com/ken-burns-effect/

Solved: Thanks Maju for introducing me to background cover. Changing the images to divs and changing the javascript + css on the Ken Burns code from images to divs worked well. The script changes the element class, so you have to use Maju's CSS another way or change the script.

Laxo
  • 23
  • 5
  • Using `min-height` and `min-width` should actually keep the ratio, are you sure you don't have a `width` or `height` defined as well? – Simon Aug 24 '16 at 14:09
  • @Simon You are right. Turns out I did have height also set to auto. When I remove it, it looks like it keeps the ratio when the window resolution is high, but when I make it narrow, some of the images are still stretched vertically. I'm going to keep testing this. – Laxo Aug 24 '16 at 14:21
  • https://jsfiddle.net/464dewrz/1/ Looks like using min-height and min-width does keep the ratio. I'm not sure what CSS is conflicting with that. – Laxo Aug 24 '16 at 14:33

1 Answers1

1

If you will use images in css background-image, you can set on any element background-size. And if I understand you right, you need something like:

.background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-attachment: fixed !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
}
<div class="background" style="background-image: url(http://www.jurosko.cz/images/stackoverflow.png)"></div>

Cover will affect image in the way that it will always cover the whole element with right aspect ratio.

There is also new css style, but it doesn't work in IE/ME.

https://css-tricks.com/almanac/properties/o/object-fit/

For this reason I recommend to use divs with background-image.

Maju
  • 616
  • 4
  • 9
  • Hey, I just found also different solutions as I needed img because of SEO and background-image was not solution for me (news images). Finally found something very interesting: http://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements Especially Solution 2 really helped me to solve big problem :) You can have img with src, but visible will be background-image. – Maju Aug 24 '16 at 16:25