Не удаётся вставить картинки в слайдер изображений
Хочу сделать слайдер с картинками на сайт по гайду, до этого была 1 картинка закинутая просто на бэкграунд и всё работало (Код до:)
.top__cont{
min-height: 100vh;
display: flex;
align-items: center;
background:url(images/slider__images/top__img.jpg) no-repeat;
background-size: cover;
background-position: center;
margin: 30px;
}
Потом по гайду стал наркручивать слайдер, все изображения были вписаны в дивы в хтмл, после чего все размеры стали неконтролируемые (width, height почему-то вообще не влияют на размер изображения) Так вот вопрос: с помощью каких тэгов можно вставить картинку и контролировать её размеры? Вот весь основной код со сладером:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="images/2.png" type="image/png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto+Condensed&display=swap" rel="stylesheet">
<title>Fnd Upped</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="header-line">
<div class="header-logo">
<img src="images/111.png" alt="logo">
</div>
</div>
<div class="navigation">
<div class="nav__buttons">
<a class="verh" href="4.html">Shop</a>
<a class="verh" href="photo.html">Photo</a>
<a class="verh" href="about.html">About</a>
<a class="verh" href="socials.html">Socials</a>
</div>
<div class="user__nav">
<a class="acc__img" href="user.php">
<img src="images/acc.png" alt="user__account__image">
</a>
<a class="cart__img" href="cart.html">
<img src="images/cart.png" alt="cart__image">
</a>
</div>
</div>
</div>
<div class="left-side">
</div>
<div class="content">
<div>
<div class="top__cont">
<div class="slider">
<input type="radio" name="radio__btn" id="radio__1">
<input type="radio" name="radio__btn" id="radio__2">
<input type="radio" name="radio__btn" id="radio__3">
<input type="radio" name="radio__btn" id="radio__4">
<div class="slide__first">
<img src="images/slider__images/top__img-1.jpg" alt="">
</div>
<div class="slide">
<img src="images/slider__images/top__img-2.2.jpg" alt="">
</div>
<div class="slide">
<img src="images/slider__images/top__img-3.2.jpg" alt="">
</div>
<div class="slide">
<img src="images/slider__images/top__img-4.2.jpg" alt="">
</div>
<div class="nav__auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
<div class="nav__manual">
<label for="radio__1"class="manual__btn"></label>
<label for="radio__2"class="manual__btn"></label>
<label for="radio__3"class="manual__btn"></label>
<label for="radio__4"class="manual__btn"></label>
</div>
</div>
</div>
</div>
<div class="str__1-cont">
<img class="png" src="images/m5.png">
<img class="mid__str-1"src="images/m6.png">
<img class="png" src="images/m7.png">
</div>
<div class="str__2-cont">
<img class="png" src="images/m1.png">
<img class="mid__str-2" src="images/m2.png">
<img class="png" src="images/m3.png">
</div>
</div>
<div class="right-side">
</div>
<div class="footer">
<div class="bottom">
<p>Introduced by D&D</p>
</div>
</div>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
.header{
font-family: 'Roboto Condensed', sans-serif;
background-color: black;
}
.header-logo{
display: flex;
justify-content: center;
background-color: black;
}
.header-line{
align-items: center;
font-family: 'Raleway', sans-serif;
}
.navigation{
display: flex;
justify-content: center;
padding: 20px;
background-color: black;
}
.nav__buttons{
margin-left: auto;
}
.verh{
margin-left: 50px;
font-size: 30px;
text-decoration: none;
color:white;
transition: color 0.25s linear;
}
.verh:hover{
color:red;
}
.user__nav{
padding: 5px;
margin-left: auto;
margin-right: 0px;
display:block;
right: 0;
}
.left-side{
background-image: url(images/left2.png);
}
.right-side{
background-image: url(images/right2.png);
}
.content{
text-align: center;
background-color: black;
}
.top__cont{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
margin: 30px;
width: 800px;
height: 500px;
overflow: hidden;
}
.slider{
width: 800px;
height: 500px;
display: flex;
}
.slide img{
width: 800px;
}
.png{
border-radius: 15px;
}
.mid__str-1{
margin-left: 20px;
margin-right: 20px;
border-radius: 15px;
}
.mid__str-2{
margin-left: 20px;
margin-right: 20px;
border-radius: 15px;
}
.str__1-cont{
margin-bottom: 20px;
}
.footer{
background-color: black;
color: aliceblue;
text-align: center;
padding-top: 40px;
}.header{
grid-area: header;
}
.content{
grid-area: content;
}
.left-side{
grid-area: left-side;
}
.right-side{
grid-area: right-side;
}
.footer{
grid-area: footer;
}
.container{
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 300px 1fr 1fr 1fr 100px;
height:100%;
color: #000;
grid-template-areas:
"left-side header right-side"
"left-side content right-side"
"left-side content right-side"
"left-side content right-side"
"left-side footer right-side";
}