如何将图像适合与表单元格显示

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

如何将图像适合与表单元格显示

回答

相关问题