Наложение div-высоты изображения с%-ширины на изображение только в CSS

Question

Я пытаюсь создать макет для галереи изображений. У пользователя должны быть кнопки со стрелками влево / вправо, чтобы увидеть следующее изображение.

В настоящее время я работаю над макетом basi c.

Все хорошо, но ..

Проблема:

Не могу понять, как отрегулировать высоту левой / правой кнопок.

Как это должно выглядеть

|<------- Image width ------->|
______________________________
|         |          |        |     ^
|                             |     |
|         |  Image   |        |     |
|   <                    >    |     | Image height
|         |          |        |     | Overlay height
|                             |     |
|_________|__________|________|     v

    ^                    ^
Overlay              Overlay

Как это выглядит на самом деле

|<------- Image width ------->|
______________________________
|         |          |        |  ^   ^
|                             |  |   |
|         |  Image   |        |  |   |
|                             |  |   | Image height
|         |          |        |  |   |
|   <                    >    |  |   |
|_________|__________|________|  |   v
|                             |  |
|         |          |        |  | Overlay height
|                             |  |
|         |          |        |  |
|_________            ________|  v

    ^                    ^
Overlay              Overlay

Код:

Это мой css

.dt5_gallery{
    z-index:1;
    background-color: greenyellow;
    width: 100%;
    text-align: center;
}

.dt5_gallery img{
    z-index: 10;
}

.dt5_gallery_button{
    z-index:20;
    position: absolute;
    background-color: #FF000055;    
    padding: 10px;
    height: 100%;
    padding-top: 40%;
    width: 40%;
}

.dt5_gallery_button_left{            
    text-align: left;
    left:0px;
}
.dt5_gallery_button_right {    
    text-align: right;
    left: calc(60%);    
}

Это мои html (br с для отображения проблемы)

<div class="dt5_gallery">    
    <span class="dt5_gallery_button dt5_gallery_button_left">&#10094;</span>
        <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Apfel-Wellant.jpg/240px-Apfel-Wellant.jpg" />
    <span class="dt5_gallery_button dt5_gallery_button_right">&#10095;</span>
</div>

<br>
<br>
<br>
<br>
<br>
<br>

Скрипка

https://jsfiddle.net/nebLjmy4/

Answer 1

Некоторым браузерам (привет Safari!) Не нравится иметь width и height на absolute позиционированных элементах. Вам нужно содержать абсолютные элементы, указав родительский элемент position: relative, и вы можете центрировать дочерние или текстовые элементы, сделав абсолютный контейнер гибким элементом. См. Комментарии в приведенном ниже коде.

В вашем сообщении не объясняется, должно ли изображение вставляться или просто заменять текущее изображение, поэтому я предположил позднее, поскольку его проще кодировать. Следовательно, используя right для создания ширины контейнеров со стрелками.

.dt5_gallery{
    z-index:1;
    background-color: greenyellow;
    width: 100%;
    text-align: center;
    position: relative; /* NEW */
}

.dt5_gallery img{
    z-index: 10;
}

.dt5_gallery_button{
    z-index:20;
    position: absolute;
    display: flex; /* NEW */
    align-items: center; /* NEW */
    background-color: #FF000055;    
    /* height: 100%; */
    /* padding-top: 40%; */
    padding: 10px;
    top: 0px; /* NEW */
    bottom: 0px; /* NEW */
}

.dt5_gallery_button_left{
    /* text-align: left; */
    left:0px;
    right: 60%;
}
.dt5_gallery_button_right {    
    /* text-align: right; */
    justify-content: right; /* NEW */
    right: 0px;
    left: 40%;
}

<div class="dt5_gallery">    
    <span class="dt5_gallery_button dt5_gallery_button_left">&#10094;</span>
        <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Apfel-Wellant.jpg/240px-Apfel-Wellant.jpg" />
    <span class="dt5_gallery_button dt5_gallery_button_right">&#10095;</span>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Answer 2

Попробуйте использовать display: table может помочь ваш макет

.dt5_gallery{
  background-color: greenyellow;
  width: 100%;
  display: table;
  text-align: center;
}

.image {
  display: table-cell;
}

.dt5_gallery_button{
  display: table-cell;
  background-color: #FF000055;
  z-index: 20;
  vertical-align: middle;
  width: 40%;
}

Онлайн проверка