如何將圖像適合與表單元格顯示

一個div我有以下HTML和CSS。正如你所看到的，我將我的主要div分成70％和30％兩部分。此外，內部div的顯示屬性設置爲表格單元格。在右內格，我有不垂直和水平適應度100％的圖像幻燈片。我也想顯示懸停在圖像上的頂層文本。我如何使圖像適合可用空間？如何在圖像懸停的圖像中心精確顯示文本？如何將圖像適合與表單元格顯示

HTML：

<div id="investment"> 

    <div id="left "> 

    </div> 
    <div id="right"> 
     <img class="slides" src="..../img01.jpeg"> 
     <img class="slides" src="..../img02.jpeg"> 
     <img class="slides" src="..../img03.jpeg"> 
     <p id="top-layer">text here</p> 
    </div> 

</div>

CSS：

#left { 
    width: 70%; 
    display: table-cell; 
    vertical-align: middle; 
} 
#right { 
    position: relative; 
    width: 30%; 
    display: table-cell; 
    vertical-align: middle; 
} 
#right #top-layer{  
    position: absolute; 
    top: 0; 
    left: 0; 
    display: table-cell; 
    vertical-align: middle; 
}

來源

2017-06-23 lil

你可以在這裏擺弄？ –

顯示圖像水平或垂直 – Bhargav

@Bhargav它是幻燈片，因此圖像被堆疊在彼此 – lil

我認爲你正在尋找以下解決方案。

可能它會HALP你！

您正在使用table-cell，但table-cell屬性不工作，直到它的父母沒有table屬性。

水平對齊 -

#investment { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
#left { 
 
    width: 70%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.slide { 
 
    display: table; 
 
} 
 

 
#right { 
 
    position: relative; 
 
    width: 30%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
#right img { 
 
    max-width: 100%; 
 
} 
 

 
.imageBlock { 
 
    position: relative; 
 
    display: table-cell; 
 
} 
 

 
.imageBlock p { 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    margin:0; 
 
} 
 

 
.imageBlock:hover p { 
 
    opacity: 1; 
 
} 
 

 
#right #top-layer { 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
#right:hover #top-layer { 
 
    position: absolute; 
 
    opacity: 1; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div id="investment"> 
 
    <div id="left "> 
 
    THIS IS BLANK SPACE AND WIDTH = 70% 
 
    </div> 
 
    <div id="right"> 
 
    <div class="slide"> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/ff00ee/ff00ee"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/ffeerr/ffeerr"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/dddddd/dddddd"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

垂直對齊 -

#investment { 
 
    display:table; 
 
    width:100%; 
 
} 
 
#left { 
 
    width: 70%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
#right { 
 
    position: relative; 
 
    width: 30%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
#right img { 
 
    min-width:100%; 
 
} 
 
.imageBlock { 
 
    position:relative; 
 
} 
 
.imageBlock p { 
 
    position:absolute; 
 
    opacity:0; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    margin:0; 
 
} 
 
.imageBlock:hover p { 
 
    opacity:1; 
 
} 
 
#right #top-layer { 
 
    position: absolute; 
 
    opacity:0; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform:translate(-50%,-50%); 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
#right:hover #top-layer{  
 
    position: absolute; 
 
    opacity:1; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform:translate(-50%,-50%); 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div id="investment"> 
 
    <div id="left "> 
 
     THIS IS BLANK SPACE AND WIDTH = 70% 
 
    </div> 
 
    <div id="right"> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/ff00ee/ff00ee"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/ffeerr/ffeerr"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/dddddd/dddddd"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-06-23 06:52:31 LKG

懸停事情完美地工作但圖像不佔據細胞100％。它們只是垂直和水平居中。 – lil

檢查更新答案 – LKG

如何將圖像適合與表單元格顯示

回答

相關問題