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

问题描述

请参阅以下代码笔: https://codepen.io/allen-houng/pen/XGMjMr?编辑者= 1100#0

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>

我有一个有两个子div的父div-一个图像和一个描述.我正在根据视口高度调整图像大小，这意味着宽度将是动态的且响应迅速.如何在不使用JavaScript的情况下调整相应的同级div .description的大小以匹配图像的宽度?

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:

到此:

推荐答案

使容器inline-block(或任何诸如table，float，absolute等的缩小至适合"配置)然后强制宽度的文本为0，因此容器的宽度由图像定义(文本对宽度没有贡献)，然后使用min-width

Make the container inline-block (or any shrink-to-fit configuration like table, 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>

第一个示例的另一个技巧是考虑图像的比例，以了解需要定义的宽度:

Another trick for the first example is to consider the ratio of the image to know the width you need to define:

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

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