Задать вопрос
hoOstel
@hoOstel
css

адаптивное модальное окно слайдер

есть код 
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="modal">

	<div class="wrapper-gallery content-modal">
		<div class="wrapper-current-photo clear-fix">
			<span class="arrow left-arrow pull-left"></span>
			<img class="current-photo pull-left" src="http://placehold.it/1260x800" alt="">
			<span class="arrow right-arrow pull-right"></span>
		</div>
	</div>

</div>
</body>
</html>

html,body{
	padding:0;
	margin:0;
	height:100%;
}

.arrow:before{
  position:relative;
  top:50%;
  background: url(arrow.png) no-repeat;
  content:"";
  height:17px;
  width:20px;
  display: block;
}
.arrow{
  width:170px;
}

.wrapper-gallery{
  height:100%;
  max-height:1058px;
}
.wrapper-gallery  h1{
    padding:17px 169px 0;
    margin:0 0 15px;
    font-size:24px;
  }
.wrapper-gallery .current-photo{
    max-width:1260px;
    max-height:800px;
    width:66.1%;
  }

.wrapper-gallery .arrow{
    width:17.1%;
    height:100%;
  }
.wrapper-gallery .arrow:hover{
    background:#f2f2f2;
  }
 .wrapper-gallery .arrow:before{
    margin-top:-29px;
  }

.wrapper-gallery  .arrow.left-arrow:before{
    left:118px;
    background-position:0 -15px;
  }
.wrapper-gallery  .arrow.right-arrow:before{
    right:-31px;
    background-position:-26px -15px;
  }
.wrapper-gallery  .arrow.left-arrow:hover:before{
    background-position:0 -31px;
  }
.wrapper-gallery  .arrow.right-arrow:hover:before{
    background-position:-26px -31px;
  }

.wrapper-gallery  .count-photo{
    display: block;
    text-align:center;
    height:29px;
    line-height:27px;
  }
.wrapper-gallery  .wrapper-current-photo{
    height:100%;
    max-height:800px;
  }

.clear-fix:before, .clear-fix:after {
    display: block;
    height: 0;
    content: '';
  }
  .clear-fix:after {
    clear:both;
  }

.pull-left{
  float:left;
}
.pull-right{
  float:right;
}

.modal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  z-index:10000;
}
.modal > .content-modal{
  background: #fff;
  position: relative;
  margin:0 auto;
}


При сужении окна должны уменьшаться в ширине,высоте: стрелки,изображение и блок "wrapper-currnet-photo".
Помогите пожалуйста решить проблему,возможно где-то есть примеры?
  • Вопрос задан
  • 3190 просмотров
1 комментарий
Подписаться 4 Оценить 1 комментарий
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
jsfiddle.net/iiil/ZW4gt/11
только с картинками стрелок я не разбирался. Там у Вас размер стрелок стоит в пикселях, а позицию логично давать в процентах. Я бы использовал псевдоселекторы before для левой стрелки и after для правой, ну это уже другой вопрос.
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ответы на вопрос 4
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Вы пример в порядок приведите, а то там одна картинка, да и то если увеличить область результата. Но в общем и целом судя по вопросу ответ @sashablashenkov правильный, используйте медиа-запросы.
Ответ написан
1 комментарий
1 комментарий
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Примеры медиа-запросов есть везде, где о них пишут. Посмотрите как сделано в твиттер-бутстрап.
Что касается Вашего примера: я там вообще не обнаружил никаких стрелок, а сейчас Вы прислали ссылку на фотографию в контакте. Если не можете разобраться - хоть скриншотов наделайте.
Ответ написан
1 комментарий
1 комментарий
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Для начала вот Вам jsfiddle.net/iiil/ZW4gt
Там я заменил стрелку на плейсхолдер 50на50, вижу что что-то не в порядке, чего хотите получить? В контакте есть кнопка "Увеличить фото", но она тут не при чем.
Вы этот код сами писали?
Ответ написан
1 комментарий
1 комментарий
sashablashenkov
@sashablashenkov
Посмотрите сюда, может поможет
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend разработчик
Базис-Центр • Коломна
от 30 000 до 70 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Консультация по деплою сайта на базе react go в сборке docker
05 мая 2024, в 00:46
10000 руб./за проект
Создать КРМП mobile проект на андроид
05 мая 2024, в 00:34
100 руб./в час
Исследовать рынок, выстроить маркетинговую стратегию
04 мая 2024, в 23:31
1000 руб./в час
Ещё заказы