Question

我得到了一个幻灯片，简单的淡入淡出，并希望使其全尺寸响应。

我获得了幻灯片显示，全屏设置和响应代码全部正常工作，但调整大小时图像并未完全居中。对于幻灯片，我使用了一个简单的插件来完成这项工作。

我已经尝试过几十个代码等等，因为我不想使用预编程的滑块。

总而言之，我的图像需要始终以窗口/屏幕尺寸为中心。

代码：

<!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>

Answer 1

使用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>

响应式图像滑块居中图像

1 个答案: