html - 如何将文本宽度与动态大小的图像/标题的宽度相匹配？

Question

请参阅此代码笔: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0

    <div>
      <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style=";">
      <div class="description">
        Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
      </div>
    </div>

我有一个父 div 和两个子 div - 一个图像和一个描述。我根据视口(viewport)高度调整图像大小，这意味着宽度将是动态的且响应灵敏。在没有 JavaScript 的情况下，如何调整相应同级 div .description 的大小以匹配图像的宽度？

换句话说，我该如何转变:

进入这个:

Answer 1

使容器inline-block(或任何收缩到适合的配置，如table、inline-grid、inline -flex、float、absolute 等)然后强制文本宽度为 0，从而定义容器的宽度通过图像(文本不影响宽度)，然后使用 min-width

再次强制宽度为 100%

.parent {
  background: pink;
  display:inline-block;
}

img {
  display: block;
  max-height: 70vh;
}

.description {
  width:0;
  min-width:100%;
}

<div class="parent">
    <img src="https://picsum.photos/id/1004/900/600">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

即使没有图像，您需要根据另一个元素调整任何元素的大小，同样的技巧也适用。

定义另一个文本大小的文本示例:

.parent {
  background: pink;
  display:inline-block;
}

.description {
  width:0;
  min-width:100%;
}

<div class="parent">
   <h2>a title that will define the width</h2>
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

定义图像大小的文本示例(与第一个片段相反)

.parent {
  background: pink;
  display:inline-block;
}

img {
  width:0;
  min-width:100%;
}

<div class="parent">
    <img src="https://picsum.photos/id/1004/900/600">
   <h2>a title that will define the width</h2>
</div>

<div class="parent">
    <img src="https://picsum.photos/id/1004/900/600">
   <h2>define the width</h2>
</div>

<div class="parent">
    <img src="https://picsum.photos/id/1004/900/600">
   <h2>very small</h2>
</div>

它还可以处理复杂的结构。

使用 CSS 网格的示例:

.container {
  display: inline-grid;
  border: 1px solid;
  grid-template-columns: auto auto;
}
.container > div {
  padding:2px;
  border:1px solid green;
}
.auto {
  grid-column:1/-1;
  width:0;
  min-width:100%;
}

<div class="container">
  <div>some text here</div>
  <div>and here</div>
  <img src="https://picsum.photos/id/1004/900/600" class="auto">
</div>
<br>

<div class="container">
  <div>some text here</div>
  <div>and a long one here</div>
  <p class="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare lacus at nisi laoreet, a fermentum augue vestibulum. Cras convallis ultrices quam, ac fermentum nibh posuere eu. Cras in pellentesque lorem. In et condimentum justo. Phasellus scelerisque nisi vitae vestibulum volutpat. Duis sit amet augue </p>
</div>

另一个带表格:

table {
  display: table;
  border:1px solid green;
}

td {
  padding: 5px;
  text-align: center;
  border:1px solid green;
}

.auto {
  width: 0;
  min-width: 100%;
  display: block;
}

<table>
  <tr>
    <td>text </td>
    <td>more text</td>
    <td>A</td>
  </tr>
  <tr>
    <td colspan="3"><img src="https://picsum.photos/id/1004/900/600" class="auto"></td>
  </tr>
</table>

<table>
  <tr>
    <td>long text here</td>
    <td>more text</td>
    <td>AAAAAAAA</td>
  </tr>
  <tr>
    <td colspan="3"><p class="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare lacus at nisi laoreet, a fermentum augue vestibulum. Cras convallis ultrices quam, ac fermentum nibh posuere eu. Cras in pellentesque lorem. In et condimentum justo. Phasellus scelerisque nisi vitae vestibulum volutpat. Duis sit amet augue </p></td>
  </tr>
</table>

<小时/>

我们还可以使用 contain: size 来完成与 width:0; 相同的工作。最小宽度:100%；

.parent {
  background: pink;
  display: inline-block;
}

img {
  display: block;
  max-height: 70vh;
}

.description {
  contain: size;
}

<div class="parent">
  <img src="https://picsum.photos/id/1004/900/600">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>