响应图像滑块居中图像

Responsive image slider centered image

本文关键字：图像 响应      更新时间：2023-09-26

我有一个幻灯片，有一个简单的淡出，我想让它的全尺寸响应。

我得到了幻灯片，全屏设置和响应代码都在工作，但图像在调整大小时不是一直居中。对于幻灯片，我使用了一个简单的插件，它可以很好地完成这项工作。

我已经尝试了几十种代码等等，因为我只是不想使用预编程的滑动条。

总而言之，我的图像需要始终处于窗口/屏幕大小的中心。

代码:

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

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

相关文章：