温馨提示:本文翻译自stackoverflow.com,查看原文请点击:css - How to match width of text to width of dynamically sized image?
css

css - 如何将文字宽度与动态尺寸图像的宽度匹配?

发布于 2020-03-30 21:45:26

请参阅以下代码笔: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-一个图像和一个描述。我正在根据视口高度调整图像大小,这意味着宽度将是动态的且响应迅速。.description在没有javascript的情况下,如何调整相应的同级div的大小以匹配图像的宽度?

换句话说,我该如何处理: 在此处输入图片说明

到这个: 在此处输入图片说明

查看更多

提问者
Allen
被浏览
17
Temani Afif 2020-02-15 05:31

使容器inline-block然后强制文本的宽度为,0以便容器的宽度由图像定义(文本对宽度没有贡献),然后再次强制宽度100%使用min-width

.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 {
  display: block;
  max-height: 70vh;
}

.description {
  max-width:calc(70vh * 1.5);
}
<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>