僅在 CSS 中使用 %-width 覆蓋圖像高度 div

Question

我正在嘗試為圖片庫創建布局。 用戶應該在圖像上有左/右按鈕才能看到下一個圖像。

目前我正在研究基本布局。

一切都很好，但是..

問題：

我不知道如何調整左/右按鈕的高度。

它應該是什么樣子

|<------- 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

嘗試使用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%;
}

在線驗證

Answer 2

一些瀏覽器（你好 Safari！）不喜歡absolute定位元素的width和height 。 您需要通過給定父position: relative來包含絕對元素，並且您可以通過使絕對容器成為 flex 元素來使子元素或文本元素居中。 請參閱下面代碼中的注釋。

你的帖子沒有解釋圖像是應該滑入還是只是替換當前圖像，所以我假設后者是因為它更容易編碼。 因此，使用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>