javascript - 将两个元素居中(高度基于容器和第二个元素的 IMG)

Question

我正在创建一个 Wordpress 模板，在某些时候用户可以使用一张图片在网站上添加一个列表。

• img 的高度应与列表的高度成比例
• 所以 img 不能有像 {object-position: cover} 这样的声明
• img 和列表应该居中

几天以来我一直在为此苦苦挣扎..

• 我尝试使用 img 绝对位置和 100% 高度，但由于缺少 img 的宽度，容器无法正确居中
• 我尝试使用 HTML 表格
• 基本上是我想到的一切

在网上查了，没有解决办法。

也许我必须尝试用 javascript 解决这个问题..

my problem in a pic

Answer 1

您可以使用 css 的 display:table 属性来解决您的问题。这是 demo

CSS

  .parent{
    display:table; /* make it table*/
    width:100%;
    table-layout:fixed;
}
.parent > *{
  display:table-cell; /* make it table-cell*/
  height:100%;/* take max-height from both childs*/
  width:50%;
  border:1px solid #000;
  vertical-align: top;
}
.parent > div img{
  max-width:100%;
  height:100%;
}
.parent ul{
  padding:0;
  }
.parent li{
  padding:10px;
  color:#000;
}

HTML

<div class="parent">
  <div><img src="https://dummyimage.com/600x400/000/fff" alt="Image"></div>
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 5</li>
     <li>List 1</li>
    <li>List 2</li>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li>List 8</li>
    <li>List 9</li>
    <li>List 10</li>
    <li>List 11</li>
  </ul>
</div>