【发布时间】：2018-11-01 21:47:32
【问题描述】：
我有一个幻灯片，带有一个简单的淡入淡出，并希望使其全尺寸响应。
我得到了幻灯片、全屏设置和响应式代码都可以正常工作，但是在调整大小时图像并没有完全居中。对于幻灯片，我使用了一个简单的插件，效果很好。
我已经尝试了几十个代码等等，因为我只是不想使用预编程的滑块。
总而言之，我的图像需要始终以窗口/屏幕大小为中心。
代码：
<!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>
【问题讨论】：
-
尝试从您的 .cycle-slideshow img 样式中删除 position:absolute
-
是否可以发布小提琴/工作 sn-p？
-
最简单的方法是在 DIV 元素上使用
background: url(img1.jpg) 50% / cover;（或contain）而不是使用<img>
标签： javascript jquery html css image