Проблема со слайдером при отдалении

[Haspid]

Вот слайдер в обычном разрешении

А вот если отдалить страницу

Как это исправить? Ниже предоставлен весь код слайдера. И кстати, использую CMS IPS 4.1.18.2

Скрытый текст

.wrapper {
    height: 290px;
    position: relative;
    width: 940px;
    margin-bottom: -10px;
}

.slider {
	background-color: #ddd;
	height: inherit;
	overflow: hidden;
	position: relative;
	width: inherit;
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	-o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

.wrapper > input {
	display: none;
}

.slides {
	height: inherit;
	position: absolute;
	width: inherit;
}

.slide1 { 
  background-image: url(http://rm-dark.ru/uploads/set_resources_12/LVKvjL6.gif);
}
.slide2 { background-image: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); }
.slide3 { background-image: url(http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); }
.slide4 { background-image: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); }
.slide5 { background-image: url(http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); }

.wrapper .controls {
    left: 44%;
    position: absolute;
    margin-top: -45px;
    z-index: 9999;
}

.wrapper label {
	cursor: pointer;
	display: inline-block;
	height: 8px;
	margin: 25px 12px 0 16px;
	position: relative;
	width: 8px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

.wrapper label:after {
	border: 2px solid #ddd;
	content: " ";
	display: block;
	height: 12px;
	left: -4px;
	position: absolute;
	top: -4px;
	width: 12px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

.wrapper label {
	cursor: pointer;
	display: inline-block;
	height: 8px;
	margin: 25px 12px 0 16px;
	position: relative;
	width: 8px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: background ease-in-out .5s;
	-moz-transition: background ease-in-out .5s;
	-o-transition: background ease-in-out .5s;
	transition: background ease-in-out .5s;
}

.wrapper label:hover, 
#slide1:checked ~ .controls label:nth-of-type(1),
#slide2:checked ~ .controls label:nth-of-type(2),
#slide3:checked ~ .controls label:nth-of-type(3),
#slide4:checked ~ .controls label:nth-of-type(4),
#slide5:checked ~ .controls label:nth-of-type(5) {
	background: #ddd;
}

.slides {
	height: inherit;
	opacity: 0;
	position: absolute;
	width: inherit;
	z-index: 0;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
	-moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
	-o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
	transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}

#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4,
#slide5:checked ~ .slider > .slide5 {
	opacity: 1;
	z-index: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

 

 

[klierik]

По идее надо обратится к разработчику, что бы он учел масштабирование в слайдере.

[Haspid]

Дело в том что код слайдера я нашёл в интернете. Это просто css и html код.

[klierik]

Попробуй растянуть картинку на всю ширину блока.

А вообще последствия любого масштабирования в браузере кроме 100% — последствия на плечах пользователя.

[Difor]

Не понятно, зачем идет трансформация картинок через scale (увеличение) ?

Сделай просто к картинкам еще "background-size: cover"

На сколько я понял по коду, то у картинок идет абсолютное позиционирование, тогда пропиши еще к ним ширину и высоту 100%.

И естественно "background-position: center center", то есть:

background-size: cover;

background-position: center center

width:100%;

height:100%;

 

Edited June 23, 2017 by Difor

[andrey7287]

А каким боком на элементы влияет background-size и background-position 

По теме: Слайдер - это такой элемент который априори не вызывает вопросов у верстальщиков. Его просто ставят и он работает. То есть я хочу сказать выкинь то что ты нашёл и используй нормальный. 

Edited June 23, 2017 by andrey7287

[Difor]

Я написал "к картинкам"... то есть к классам slide1, slide2 и т.д... где используется background-image