есть код
<!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".
Помогите пожалуйста решить проблему,возможно где-то есть примеры?
Простой
Простой
