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

Question

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

16

请查看此 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>

我有一个父级 div，其中包含两个子级 div - 一个图片和一个描述。我根据视口高度调整图像大小，这意味着宽度将是动态且响应式的。如何调整相应的同级 .description div 来匹配图像的宽度，而不使用 JavaScript？

换句话说，我如何将这个：

变成这个：

- Allen

https://dev59.com/JqXja4cB1Zd3GeqPKwjy - kukkuz

@kukkuz 那个是一个不同的应用程序。 - Allen

2个回答

0

您可以在图像上简单地设置宽度为100％。只需将“width: 100％;”添加到您的img样式标签中进行测试，如下所示：

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style="width: 100%;">
  <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>

或者将其制作成一个类：

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

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" class="img-full">
  <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>

"display: block" 只是确保您的 img 始终在自己的块中，而不受宽度的影响。也就是说，您的文本不会出现在其旁边，只会出现在其下方或上方。

- cmprogram

将宽度设置为100％会拉伸图像，因为我是根据视口高度调整大小的。 - Allen

那么答案是，除非你进行静态设置，否则你不能两者兼得。如果你的图像不同，你可以将高度设置为100％或宽度设置为100％。你的CSS无法重新创建具有不同分辨率的图像以适应页面。 - cmprogram

@Xavier 这并不会改变图像分辨率，它会根据屏幕分辨率拉伸或压缩图像。 - cmprogram

@cmprogram 抱歉，我的意思是以不同的方式使用查询。通过检查视口的方向，您可以选择使用 height:100% 或 width:100%。如果您使用 height:100%，请将宽度设置为 auto，反之亦然。 - Xavier

@cmprogram 抱歉，我在想另一个问题。虽然我仍然认为您可以使用查询来检查父包装器的方向，然后设置适当的维度属性，其中另一个设置为自动。 - Xavier

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

将容器设置为inline-block（或任何shrink-to-fit配置，如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 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>

还有一个带表格的例子：

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; min-width: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>