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

Question

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

P粉008829791 · Answer

您可以简单地将图像的宽度设置为 100%。只需添加“宽度：100%；”进入您的 img 样式标签进行测试，如下所示：


  
  
    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.

或者将其放入一个类中：

.img-full {
  display: block;
  width: 100%;
}


  
  
    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.

“display: block”只是确保您的 img 始终位于它自己的块中，无论宽度如何。即您的文字不会出现在其旁边，只会出现在其下方或上方。

P粉030479054 · Answer

使容器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%;
}


    
  
    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.