我从事自学，遇到这样一个问题，解决起来很笨=（
- 我希望滑块具有自适应性，但图片表现不佳，我喜欢它们爬出 flexBOX 过道，但同时 max-width: 960px; 对于容器它不起作用如何修复它没看懂=(
- 自己写了一小段js代码，只是个拐杖，所以不想用，或许有一些足够的解决办法？
(function () {
let MyWidth = document.documentElement.clientWidth;
let MyImagesSlayder = slayder.querySelectorAll("img");
for(let kay of MyImagesSlayder){ //кастыль на ширену CSS
kay.style.maxWidth = MyWidth +"px";
}
console.log(MyWidth);
}());@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
margin: 0px;
padding: 0px;
}
body{
font-family: "roboto";
}
.content{
margin: auto;
max-width: 960px;
}
.slayder{
max-width: 960px;
position: relative;
}
.slayder-images-box{
display: flex;
}
.box-slayder{
position: relative;
display: flex;
max-width: 960px;
}
.box-slayder img{
height: 400px;
/* width: 100%; */
/* Хочу чтобы было адаптивно но фотографии сжимаются =(*/
}
/* ================== */
.box-slayder a{
font-size: 30px;
position: absolute;
bottom: 50px;
left: 70px;
padding: 20px;
width: 350px;
color: #fff;
background: #000;
opacity: 0.7;
text-decoration: none;
}
.battan-slayder{
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
top: 50%;
font-size: 40px;
color: #fff;
}
.battan-slayder i {
margin: 0px 20px;
opacity: 0.7;
}
.battan-slayder i:hover {
opacity: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style/global_Stale.css">
<link rel="stylesheet" href="libs/font-css/all.min.css">
</head>
<body>
<div class="content">
<div class="slayder" id="slayder">
<div class="slayder-images-box">
<div class="box-slayder box-1">
<img src="https://www.supervizuelna.com/wp-content/uploads/2018/01/1-960x380.jpg" alt="">
<a href="#">Lorem ipsum, dolor sit, amet consectetur adipisicing elit.</a>
</div>
<div class="box-slayder ">
<img src="http://www.wsyc.org.uk/wp-content/uploads/2019/05/featuredimage-The-Connection-Between-Las-Vegas-and-Skiing-960x380.png" alt="">
<a href="#">Commodi culpa magnam distinctio, facere facilis corrupti quis.</a>
</div>
<div class="box-slayder">
<img src="https://www.supervizuelna.com/wp-content/uploads/2018/01/1-960x380.jpg" alt="">
<a href="#">Possimus iure odit, voluptates sapiente nobis aspernatur, suscipit.</a>
</div>
<div class="box-slayder">
<img src="http://www.wsyc.org.uk/wp-content/uploads/2019/05/featuredimage-The-Connection-Between-Las-Vegas-and-Skiing-960x380.png" alt="">
<a href="#">Vel nesciunt voluptatem, quis nobis in minus quasi!</a>
</div>
</div>
<div class="battan-slayder">
<i class="fas fa-angle-left"></i>
<i class="fas fa-angle-right"></i>
</div>
</div>
</div>
<script src="js/slayder.js"></script>
</body>
</html>
我可能误解了你的意思，但我这样做是为了让每张幻灯片都占据整个屏幕，直到 width
960px，使用容器本身和图像的值100vw。width