html - 如何使用表格单元格显示使图像适合 div

Question

我有以下 HTML 和 CSS。如您所见，我将主 div 分为 70% 和 30% 两部分。此外，内部 div 的显示属性设置为表格单元格。在右侧的内部 div 上，我有图像幻灯片，在垂直和水平方向上都不适合 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;
 }

Answer 1

我认为您正在寻找以下解决方案。

也许它会阻止你!

您正在使用 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>