Странное поведение flexBOX вложенными картинками

Question

Занимаюсь самообразованием ну и натолкнулся на вот такую проблему которую немому решить =(

Хочу чтобы слайдер был адаптивный, но картинки себя ведут не адекватно, мне нравится что они вылезают за приделы 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>

Answer 1

Я мог неправильно вас понять, но сделал так, что каждый слайд занимает весь экран до ширины 960px, используя значение 100vw для width самого контейнера и изображения.

@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;
    width: 100vw;
}
.slayder{
    max-width: 960px;
    width: 100%;
    position: relative;
}
.slayder-images-box{
    display: flex;
    width: 100%;
    max-width: 960px;
}
.box-slayder{
    position: relative;
    display: flex;
    width: 100%;
    max-width: 960px;
}
.box-slayder img{
    height: auto;
    width: 100vw;
    max-width: 960px;
    /* Хочу чтобы было адаптивно но фотографии сжимаются =(*/
    
}

/* ================== */

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

БЛОГ НА HUSL

Странное поведение flexBOX вложенными картинками

Ответы (1 шт):