Responsive image slider centered image

Question

I got a slideshow, with a simple fade, and want to make it full size responsive.

I got the slideshow, the fullscreen settings and the responsive code all working, but the image is not centered all the way when resizing it. For the Slideshow I used a simple plugin which does the job very well.

I've tried dozens and dozens of codes and so on because I just don't want to use a pre-programmed slider.

So to conclude, my image needs to be centered to the window/ screen size always.

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xXxXx</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"></script>


<style type="text/css">

body {
    font-family:sans-serfi;
}

.cycle-slideshow {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

.cycle-slideshow img{
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
</style>
</head>

<body>

<div class="cycle-slideshow">
    <img src="slider/1.jpg" alt="slider 1">
    <img src="slider/2.jpg" alt="slider 2">
    <img src="slider/3.jpg" alt="slider 3">
</div>

</body>
</html>

try removing position:absolute from your .cycle-slideshow img style — Jade, Aug 27 '15 at 22:13
The easiest would be to use `background: url(img1.jpg) 50% / cover;` (or `contain`) on a DIV element instead of using `` — Roko C. Buljan, Aug 27 '15 at 22:20

Roko C. Buljan · Answer 1 · 2018-11-01T13:47:32.743

1

Centered full background image using DIV:

.cycle-slideshow {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

.cycle-slideshow div{
  position: absolute; 
  background: none 50% / cover;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto;
}

<div class="cycle-slideshow">
  <div style="background-image:url(//placehold.it/800x600/cf5?text=1)"></div>
  <div style="background-image:url(//placehold.it/800x600/f5c?text=2)"></div>
  <div style="background-image:url(//placehold.it/800x600/5cf?text=3)"></div>
</div>

edited Nov 01 '18 at 13:47

answered Aug 27 '15 at 22:28

Roko C. Buljan

196,159
39
305
313

I've done this and it works really well. But my images do not fade anymore, so there isn't a slideshow. Do you have a script that does the job? – yisharu Aug 28 '15 at 14:03
@yisharu sure: http://stackoverflow.com/questions/25799055/how-to-fade-loop-background-images – Roko C. Buljan Sep 01 '15 at 10:59

Responsive image slider centered image

1 Answers1