Вставил изображения, которые соответствуют размерам слайдера, но они всё равно растягиваются. Подскажите, что не так? Заранее спасибо
body {
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
box-sizing: border-box;
font-size: 16px;
}
* {
box-sizing: border-box;
}
.container,
.select-box,
.media {
width: 100%;
padding-left: 30px;
padding-right: 30px;
}
a {
text-decoration: none;
font-family: Montserrat;
font-style: normal;
font-size: 13px;
line-height: 16px;
color: #000000;
}
.tel {
position: relative;
font-size: 16px;
margin-bottom: 25px;
margin-right: 850px;
padding-left: 30px;
vertical-align: top;
font-weight: 500;
}
.pay {
font-size: 14px;
text-decoration: underline;
margin-right: 20px;
text-decoration-line: underline;
vertical-align: top;
text-align: center;
margin-left: 225px;
}
a.pay:hover {
text-decoration-line: none;
}
.feedback {
font-size: 14px;
text-decoration-line: underline;
vertical-align: top;
text-align: center;
}
a.feedback:hover {
text-decoration-line: none;
}
section {
padding-top: 113px
}
p {
margin: 0;
}
ul,
li {
display: block;
padding: 0;
margin: 0;
}
.header-top,
.media {
padding-left: 30px;
padding-right: 30px;
}
.header-top {
padding: 4px 0;
padding-top: 4px;
padding-bottom: 4px;
background-color: #F6B300;
height: 25px;
position: relative;
}
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
background: #ffffff;
color: #414141;
font: 400 17px/2em 'Source Sans Pro', sans-serif;
}
.select-box {
cursor: pointer;
position: relative;
max-width: 20em;
vertical-align: top;
margin-top: -39px;
margin-left: 250px;
width: 200px;
}
.select,
.label {
color: #000000;
font: 400 17px/2em 'Source Sans Pro', sans-serif;
padding-top: 20px;
height: 26px;
display: flex;
align-items: center;
}
.select {
width: 100%;
position: absolute;
top: 0;
padding: 5px 0;
height: 40px;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
background: none transparent;
border: 0 none;
}
.select-box1 {
background: #F6B300;
}
.label {
position: relative;
padding: 5px 10px;
cursor: pointer;
}
.open .label::after {
content: "▲";
}
.label::after {
content: "▼";
font-size: 12px;
position: absolute;
right: 0;
top: 1;
padding: 1px 20px;
}
.media {
display: flex;
flex-direction: row;
justify-content: flex-start;
padding-top: 20px;
}
.logo {
display: inline-block;
justify-content: space-between;
align-items: center;
max-width: 1400px;
padding-left: 30px;
}
.logo img {
width: 230px;
height: 45px;
}
.r-icon {
width: 100%px;
display: inline-block;
padding-left: 800px;
}
.r-icon img {
width: 50px;
height: 45px;
}
.register a {
display: inline-block;
margin-top: 15px;
margin-left: 12px;
white-space: nowrap;
text-decoration: underline;
font-size: 14px;
color: #FF0000;
}
.register a:hover {
text-decoration-line: none;
}
.button {
display: flex;
flex-direction: row;
justify-content: flex-start;
background-color: #c0392b;
margin-right: 70px;
width: 150px;
height: 45px;
line-height: 50px;
right: 0;
color: #fff;
position: absolute;
bottom: 16;
cursor: pointer;
overflow: hidden;
border-radius: 30px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
.button span,
.button .icon {
display: inline-block;
height: 100%;
text-align: center;
position: absolute;
top: 0;
}
.button span {
width: 72%;
line-height: inherit;
font-size: 16px;
text-transform: uppercase;
left: 0;
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
.button span:after {
content: "";
background-color: #a53125;
width: 2px;
height: 70%;
position: absolute;
top: 15%;
right: -1px;
}
.button .icon {
color: #FFFFFF;
width: 25%;
align-items: center;
right: 0;
margin-top: 6px;
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
.button .icon .fa {
font-size: 30px;
vertical-align: middle;
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4), height 0.25s ease;
}
.button .icon .fa-remove {
height: 36px;
}
.button .icon .fa-check {
display: none;
}
.button.success span,
.button:hover span {
left: -72%;
opacity: 0;
}
.button.success .icon,
.button:hover .icon {
width: 100%;
}
.button.success .icon .fa,
.button:hover .icon .fa {
font-size: 45px;
}
.button.success {
background-color: #F6B300;
}
.button.success .icon .fa-remove {
display: none;
}
.button:hover {
opacity: 0.9;
}
.button:hover .icon .fa-remove {
height: 46px;
}
.button:active {
opacity: 1;
}
.navbar {
width: 100%;
background: #D10000;
}
.string{
min-height: 60px;
padding: 5px 0;
position: relative;
z-index: 100;
width: 1400px;
display: flex;
align-items: center;
margin: 0 auto
}
.c1{
display: flex;
align-items: center;
}
.c-icon {
background-image: url('../img/catalog.svg');
background-size: contain;
width: 18px;
height: 18px;
}
.catalog {
box-sizing: border-box;
display: flex;
font-size: 18px;
line-height: 17px;
font-weight: 500;
padding-top: 3px;
margin-left: 19px;
color: #ffffff;
margin-left: 9px;
}
.catalog:hover {
text-decoration: underline;
text-underline-position: under;
margin-bottom: 5px;
}
.b1{
display: flex;
align-items: center;
margin-left: 39px;
}
.b-icon {
background-image: url('../img/gift.svg');
background-size: contain;
width: 20px;
height: 20px;
}
.bonus {
box-sizing: border-box;
display: flex;
font-size: 18px;
line-height: 17px;
font-weight: 500;
padding-top: 3px;
margin-left: 19px;
color: #ffffff;
margin-left: 9px;
}
.bonus:hover {
text-decoration: underline;
text-underline-position: under;
margin-bottom: 5px;
}
.a1{
display: flex;
align-items: center;
margin-left: 39px;
}
.a-icon {
background-image: url('../img/percent.svg');
background-size: contain;
width: 19px;
height: 19px;
}
.stocks {
box-sizing: border-box;
display: flex;
font-size: 18px;
line-height: 17px;
font-weight: 500;
padding-top: 3px;
margin-left: 19px;
color: #ffffff;
margin-left: 9px;
}
.stocks:hover {
text-decoration: underline;
text-underline-position: under;
margin-bottom: 5px;
}
.m1{
display: flex;
align-items: center;
margin-left: 39px;
}
.m-icon {
background-image: url('../img/shop.svg');
background-size: contain;
width: 20px;
height: 20px;
}
.shops {
box-sizing: border-box;
display: flex;
font-size: 18px;
line-height: 17px;
font-weight: 500;
padding-top: 3px;
margin-left: 19px;
color: #ffffff;
margin-left: 9px;
}
.shops:hover {
text-decoration: underline;
text-underline-position: under;
margin-bottom: 5px;
}
.d1{
display: flex;
align-items: center;
margin-left: 39px;
}
.d-icon {
background-image: url('../img/delivery.svg');
background-size: contain;
width: 20px;
height: 20px;
}
.delivery {
box-sizing: border-box;
display: flex;
font-size: 18px;
line-height: 17px;
font-weight: 500;
padding-top: 3px;
margin-left: 19px;
color: #ffffff;
margin-left: 9px;
}
.delivery:hover {
text-decoration: underline;
text-underline-position: under;
margin-bottom: 5px;
}
.carousel {
height: 300px;
width: 100%;
overflow: hidden;
text-align: center;
position: relative;
padding: 0;
list-style: none;
}
.carousel__controls,
.carousel__activator {
display: none;
}
.carousel__activator:nth-of-type(1):checked ~ .carousel__track {
transform: translateX(0%);
}
.carousel__activator:nth-of-type(1):checked ~ .carousel__slide:nth-of-type(1) {
transition: opacity 0.5s, transform 0.5s;
top: 0;
left: 0;
right: 0;
opacity: 1;
transform: scale(1);
}
.carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1) {
display: block;
opacity: 1;
}
.carousel__activator:nth-of-type(1):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(1) {
opacity: 1;
}
.carousel__activator:nth-of-type(2):checked ~ .carousel__track {
transform: translateX(-100%);
}
.carousel__activator:nth-of-type(2):checked ~ .carousel__slide:nth-of-type(2) {
transition: opacity 0.5s, transform 0.5s;
top: 0;
left: 0;
right: 0;
opacity: 1;
transform: scale(1);
}
.carousel__activator:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2) {
display: block;
opacity: 1;
}
.carousel__activator:nth-of-type(2):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(2) {
opacity: 1;
}
.carousel__activator:nth-of-type(3):checked ~ .carousel__track {
transform: translateX(-200%);
}
.carousel__activator:nth-of-type(3):checked ~ .carousel__slide:nth-of-type(3) {
transition: opacity 0.5s, transform 0.5s;
top: 0;
left: 0;
right: 0;
opacity: 1;
transform: scale(1);
}
.carousel__activator:nth-of-type(3):checked ~ .carousel__controls:nth-of-type(3) {
display: block;
opacity: 1;
}
.carousel__activator:nth-of-type(3):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(3) {
opacity: 1;
}
.carousel__activator:nth-of-type(4):checked ~ .carousel__track {
transform: translateX(-300%);
}
.carousel__activator:nth-of-type(4):checked ~ .carousel__slide:nth-of-type(4) {
transition: opacity 0.5s, transform 0.5s;
top: 0;
left: 0;
right: 0;
opacity: 1;
transform: scale(1);
}
.carousel__activator:nth-of-type(4):checked ~ .carousel__controls:nth-of-type(4) {
display: block;
opacity: 1;
}
.carousel__activator:nth-of-type(4):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(4) {
opacity: 1;
}
.carousel__activator:nth-of-type(5):checked ~ .carousel__track {
transform: translateX(-400%);
}
.carousel__activator:nth-of-type(5):checked ~ .carousel__slide:nth-of-type(5) {
transition: opacity 0.5s, transform 0.5s;
top: 0;
left: 0;
right: 0;
opacity: 1;
transform: scale(1);
}
.carousel__activator:nth-of-type(5):checked ~ .carousel__controls:nth-of-type(5) {
display: block;
opacity: 1;
}
.carousel__activator:nth-of-type(5):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(5) {
opacity: 1;
}
.carousel__control {
height: 30px;
width: 30px;
margin-top: -15px;
top: 50%;
position: absolute;
display: block;
cursor: pointer;
border-width: 5px 5px 0 0;
border-style: solid;
border-color: #fafafa;
opacity: 0.35;
outline: 0;
z-index: 3;
}
.carousel__control:hover {
opacity: 1;
}
.carousel__control--backward {
left: 10px;
transform: rotate(-135deg);
}
.carousel__control--forward {
right: 10px;
transform: rotate(45deg);
}
.carousel__indicators {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.carousel__indicator {
height: 15px;
width: 15px;
border-radius: 100%;
display: inline-block;
z-index: 2;
cursor: pointer;
opacity: 0.35;
margin: 0 2.5px 0 2.5px;
}
.carousel__indicator:hover {
opacity: 0.75;
}
.carousel__track {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
transition: transform 0.5s ease 0s;
}
.carousel__track .carousel__slide {
display: block;
top: 0;
left: 0;
right: 0;
opacity: 1;
}
.carousel__track .carousel__slide:nth-of-type(1) {
transform: translateX(0%);
}
.carousel__track .carousel__slide:nth-of-type(2) {
transform: translateX(100%);
}
.carousel__track .carousel__slide:nth-of-type(3) {
transform: translateX(200%);
}
.carousel__track .carousel__slide:nth-of-type(4) {
transform: translateX(300%);
}
.carousel__track .carousel__slide:nth-of-type(5) {
transform: translateX(400%);
}
.carousel--scale .carousel__slide {
transform: scale(0);
}
.carousel__slide {
height: 100%;
position: absolute;
overflow-y: auto;
opacity: 0;
}
/**
* Theming
*/
* {
box-sizing: border-box;
}
.carousel-container {
display: flex;
justify-content: center;
margin-left: 60px;
margin-right: 60px;
}
.my-carousel {
border-radius: 0px;
margin-left: auto;
margin-right: auto;
}
.carousel__slide {
overflow: hidden;
}
.carousel--thumb .carousel__indicator {
height: 30px;
width: 30px;
}
.carousel__indicator {
background-color: #D10000;
}
.carousel__slide:nth-of-type(1),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) {
background-image: url("../img/142BBD273D53DA3FA54A3AE9D493F64C_1618562766589.jpg");
background-size: cover;
background-position: center;
}
.carousel__slide:nth-of-type(2),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) {
background-image: url("../img/astykzhan_176012651_311136380670048_2190586481430973455_n.jpg");
background-size: cover;
background-position: center;
}
.carousel__slide:nth-of-type(3),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) {
background-image: url("../img/astykzhan_188316891_2963519800591105_8369683926835455518_n.jpg");
background-size: cover;
background-position: center;
}
.carousel__slide:nth-of-type(4),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(4) {
background-image: url("../img/astykzhan_193058876_314263970138682_1411469765474473484_n.jpg");
background-size: cover;
background-position: center;
}
.carousel__slide:nth-of-type(5),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(5) {
background-image: url("../img/astykzhankostanay_186783740_291232569330232_4284322746624849312_n.jpg");
background-size: cover;
background-position: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Астыкжан</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;1,300&family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-top">
<div class="container">
<a href="tel:+77479009999" class="tel"> +7 747 900 99 99 </a>
<a href="#" class="pay"> Оплата </a>
<a href="#" class="feedback">Обратная связь</a>
<div class="select-box">
<label for="select-box1" class="label select-box1"><span class="label-desc">Ваш город</span> </label>
<select id="select-box1" class="select">
<option value="Choice 1">Нур-Султан</option>
<option value="Choice 2">Костанай</option>
</select>
</div>
</div>
</div>
</div>
<div class="media">
<div class="logo">
<a href="/index.html">
<img src="img/ex.jpg">
</a>
</div>
<div class="r-icon">
<a href="#">
<img src="img/user.png">
</a>
</div>
<div class="register">
<a href="#"> Вход/Регистрация
</a>
</div>
<a class="button" href="#">
<span>Корзина</span>
<div class="icon">
<img src="img/cart.png">
<i class="fa fa-remove"></i>
<i class="fa fa-check"></i>
</div>
<script>(function() {
var removeSuccess;
removeSuccess = function() {
return $('.button').removeClass('success');
};
$(document).ready(function() {
return $('.button').click(function() {
$(this).addClass('success');
return setTimeout(removeSuccess, 3000);
});
});
}).call(this);</script>
</a>
</div>
<script>
$("select").on("click", function() {
$(this).parent(".select-box").toggleClass("open");
});
$(document).mouseup(function(e) {
var container = $(".select-box");
if (container.has(e.target).length === 0) {
container.removeClass("open");
}
});
$("select").on("change", function() {
var selection = $(this).find("option:selected").text(),
labelFor = $(this).attr("id"),
label = $("[for='" + labelFor + "']");
label.find(".label-desc").html(selection);
});
</script>
<div class="navbar">
<div class="string">
<a href="#" class="c1">
<div class="c-icon"></div>
<div class="menu">
<span class="catalog">Каталог</span>
</div>
</a>
<a href="#" class="b1">
<div class="b-icon"></div>
<div class="menu">
<span class="bonus">Бонусы</span>
</div>
</a>
<a href="#" class="a1">
<div class="a-icon"></div>
<div class="menu">
<span class="stocks">Акции</span>
</div>
</a>
<a href="#" class="m1">
<div class="m-icon"></div>
<div class="menu">
<span class="shops">Магазины</span>
</div>
</a>
<a href="#" class="d1">
<div class="d-icon"></div>
<div class="menu">
<span class="delivery">Доставка</span>
</div>
</a>
</div>
</div>
<div class="carousel-container">
<div class="carousel my-carousel carousel--translate">
<input class="carousel__activator" type="radio" name="carousel" id="F" checked="checked"/>
<input class="carousel__activator" type="radio" name="carousel" id="G"/>
<input class="carousel__activator" type="radio" name="carousel" id="H"/>
<input class="carousel__activator" type="radio" name="carousel" id="I"/>
<input class="carousel__activator" type="radio" name="carousel" id="J"/>
<div class="carousel__controls">
<label class="carousel__control carousel__control--backward" for="J"></label>
<label class="carousel__control carousel__control--forward" for="G"></label>
</div>
<div class="carousel__controls">
<label class="carousel__control carousel__control--backward" for="F"></label>
<label class="carousel__control carousel__control--forward" for="H"></label>
</div>
<div class="carousel__controls">
<label class="carousel__control carousel__control--backward" for="G"></label>
<label class="carousel__control carousel__control--forward" for="I"></label>
</div>
<div class="carousel__controls">
<label class="carousel__control carousel__control--backward" for="H"></label>
<label class="carousel__control carousel__control--forward" for="J"></label>
</div>
<div class="carousel__controls">
<label class="carousel__control carousel__control--backward" for="I"></label>
<label class="carousel__control carousel__control--forward" for="F"></label>
</div>
<div class="carousel__track">
<li class="carousel__slide">
</li>
<li class="carousel__slide">
</li>
<li class="carousel__slide">
</li>
<li class="carousel__slide">
</li>
<li class="carousel__slide">
</li>
</div>
<div class="carousel__indicators">
<label class="carousel__indicator" for="F"></label>
<label class="carousel__indicator" for="G"></label>
<label class="carousel__indicator" for="H"></label>
<label class="carousel__indicator" for="I"></label>
<label class="carousel__indicator" for="J"></label>
</div>
</div>
</div>
</body>
</html>