如何将文本宽度与动态大小的图像/标题的宽度匹配? [英] How to match width of text to width of dynamically sized image/title?

查看：31
本文介绍了如何将文本宽度与动态大小的图像/标题的宽度匹配?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请看这个代码笔:

进入这个:

解决方案

制作容器 inline-block(或任何像 table、inline-grid,inline-flex, float,absolute etc) 然后强制文本的宽度为 0 所以容器的宽度由图像定义(文本不影响宽度)然后使用 min- 再次强制宽度为 100%宽度

.parent {背景:粉红色；显示:内联块；}图片{显示:块；最大高度:70vh；}.描述 {宽度:0；最小宽度:100%；}

<img src="https://picsum.photos/id/1004/900/600"><div class="描述">后果自负.Nulla 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.

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

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

.parent {背景:粉红色；显示:内联块；}.描述 {宽度:0；最小宽度:100%；}

<h2>将定义宽度的标题</h2><div class="描述">后果自负.Nulla 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.

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

.parent {背景:粉红色；显示:内联块；}图片{宽度:0；最小宽度:100%；}

<img src="https://picsum.photos/id/1004/900/600"><h2>将定义宽度的标题</h2>
<div class="parent"><img src="https://picsum.photos/id/1004/900/600"><h2>定义宽度</h2>

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

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

使用 CSS 网格的示例:

.container {显示:内联网格；边框:1px 实心；网格模板列:自动自动；}.container >div {填充:2px；边框:1px 纯绿色；}.汽车 {网格列:1/-1；宽度:0；最小宽度:100%；}

<div>这里有一些文字</div><div>和这里</div><img src="https://picsum.photos/id/1004/900/600" class="auto">
<br><div class="容器"><div>这里有一些文字</div><div>这里还有一个很长的</div><p class="auto">Lorem ipsum dolor sat amet，consectetur adipiscing 精英.位于 nisi laoreet 的 Duis ornare lacus，一个发酵的 augue 前庭.Cras convallis ultrices quam，acfermentum nibh posuere eu.Cras in pellentesque lorem.在 et condimentum justo.Phasellus scelerisque nisi vitae 前庭 volutpat.Duis 坐在 amet augue </p>

另一个带桌子的:

table {显示:表；边框:1px 纯绿色；}TD{填充:5px；文本对齐:居中；边框:1px 纯绿色；}.汽车 {宽度:0；最小宽度:100%；显示:块；}

<tr><td>文本 </td><td>更多文字</td><td>A</td></tr><tr><td colspan="3"><img src="https://picsum.photos/id/1004/900/600" class="auto"></td></tr>
<表格><tr><td>长文本在这里</td><td>更多文字</td><td>AAAAAAAAA</td></tr><tr><td colspan="3"><p class="auto">Lorem ipsum dolor sat amet，consectetur adipiscing 精英.位于 nisi laoreet 的 Duis ornare lacus，一个发酵的 augue 前庭.Cras convallis ultrices quam，acfermentum nibh posuere eu.Cras in pellentesque lorem.在 et condimentum justo.Phasellus scelerisque nisi vitae 前庭 volutpat.Duis 坐在 amet augue </p></td></tr></table>

Please see this codepen: 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>

I have a parent div with two child divs - an image and a description. I'm sizing the image according to viewport height which means the width would be dynamic and responsive. How would I size the corresponding sibling div .description to match the image's width without javascript?

In other words, how do I turn this:

into this:

解决方案

Make the container inline-block (or any shrink-to-fit configuration like table,inline-grid,inline-flex, float,absolute etc) then force the width of text to be 0 so the width of the container is defined by the image (the text doesn't contribute to the width) then force the width again to be 100% using 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>

The same trick work even without image where you need any element to be sized based on another one.

Example with text defining the size of another text:

.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>

Example with text defining the size of the image (the opposite of the first snippet)

.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>

It can also work with complex structure.

Example using CSS grid:

.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>

another one with table:

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>

这篇关于如何将文本宽度与动态大小的图像/标题的宽度匹配?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆