@valarok

Как выровнять высоту изображения absolute в родительском div relаtive?

Есть код (кидаю без JS) слайдера, в котором 4 изображения наложены друг на друга свойством position: absolute относительно родительского элемента div.slider с position:relative.
Вопрос:
1. Как сделать высоту div.slider равную высоту картинок в слайдере?
2. Как выровнять кнопки ВПЕРЕД и НАЗАД по средине высоты картинок (с учетом изменения ширины и высоты окна просмотра)?
<body>
 <div class="container">
        <div class="row" id="gallery">
                    <div class="col-sm-1 col-md-1 col-lg-1 left-button buttons">
                            <input type="button" value="НАЗАД" class='prev'/>
                     </div>
        <div class="col-sm-10 col-md-10 col-lg-10 photoes">
             <div class="slider">
                <img src="url" class="showed">
                <img src="url">
                <img src="url">
                <img src="url">
              </div>
        </div>
                     <div class="col-sm-1 col-md-1 col-lg-1 right-button buttons">
                            <input type="button" value="ВПЕРЕД" class="next"/>
                     </div>
       </div>
</div>
</body>

CSS:
#gallery {
    margin: 0 auto;
    padding: 0;
    height: 100%;
               }
#gallery .buttons
{
    position: relative;
    height: 100%;
    display: block;
}
.col-sm-10, .col-md-10, .col-lg-10, .photoes {
    margin: 0;
    height: 100%;
    display: block;
                                                                      }
.slider {
width: 100%;
position: relative;
height: 100%;
display: block;
            }
#gallery .photos .slider img{
    width: 100%;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: opacity 2s; 
}
#gallery .photos img.showed {
    opacity: 1;
}
.prev {
    position: absolute;
    left:0;
    top: 20%;
    border: 1px solid red;
    margin: 0;
    padding: 0;
          }
.next {
    position: absolute;
    right: 0;
    top: 20%;
    border: 1px solid red;
    margin: 0;
    padding: 0;
         }

Подскажите, пожалуйста
  • Вопрос задан
  • 118 просмотров
Пригласить эксперта
Ответы на вопрос 1
@noeer
1. Нельзя заставить блок растягиваться в соответствии с высотой содержимого, если последнее имеет position: absolute. Ищите другие способы реализации.
2. Чтобы выровнять абсолютно спозиционированные кнопки по центру, относительно высоты родительского блока, нужно знать высоту самих кнопок. Например, если высота кнопок 30px
.prev,
.next{
	position: absolute;
	top: 50%;
	height: 30px;
	margin-top: -15px;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы