How to match width of text to width of dynamically sized image/title?

Question

Please see this codepen: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0

相关标签:

Answer 1

Example with flexbox

*{margin:0}
.img
{
  background: url(https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fih0.redbubble.net%2Fimage.236642016.7494%2Fap%2C550x550%2C12x16%2C1%2Ctransparent%2Ct.png&f=1);
  height: 100vh;
  background-size: cover;
  
}

<figure>
  <div class="img"></div>
  <figcaption>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nulla et nunc mattis mollis. Donec ornare ornare nibh, tempor elementum magna molestie vitae. Donec posuere felis vitae sapien suscipit, vel ultricies justo feugiat. Pellentesque semper
    neque mi, eget venenatis turpis faucibus quis. Maecenas a odio odio. Etiam velit felis, tincidunt at feugiat sit amet, condimentum eget eros. Cras nec mauris non justo ullamcorper dignissim. Nullam vel nulla sit amet neque aliquet ullamcorper consectetur
    laoreet sapien. Etiam convallis est libero, et finibus tellus tempus id. Ut imperdiet vestibulum nisi id venenatis. In eget justo vel purus hendrerit congue eget eu ante. Suspendisse non erat eget nisl facilisis volutpat. In consequat est nec lacus
    fringilla, at varius tortor vehicula. Morbi dui arcu, efficitur nec sagittis vitae, vulputate eget leo.
  </figcaption>
</figure>

If you only need your figure to be 100% width, there's easier solution:

*{margin:0}

<figure>
  <img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fih0.redbubble.net%2Fimage.236642016.7494%2Fap%2C550x550%2C12x16%2C1%2Ctransparent%2Ct.png&f=1" width="100%">
  <figcaption>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nulla et nunc mattis mollis. Donec ornare ornare nibh, tempor elementum magna molestie vitae. Donec posuere felis vitae sapien suscipit, vel ultricies justo feugiat. Pellentesque semper
    neque mi, eget venenatis turpis faucibus quis. Maecenas a odio odio. Etiam velit felis, tincidunt at feugiat sit amet, condimentum eget eros. Cras nec mauris non justo ullamcorper dignissim. Nullam vel nulla sit amet neque aliquet ullamcorper consectetur
    laoreet sapien. Etiam convallis est libero, et finibus tellus tempus id. Ut imperdiet vestibulum nisi id venenatis. In eget justo vel purus hendrerit congue eget eu ante. Suspendisse non erat eget nisl facilisis volutpat. In consequat est nec lacus
    fringilla, at varius tortor vehicula. Morbi dui arcu, efficitur nec sagittis vitae, vulputate eget leo.
  </figcaption>
</figure>

If you want to do this automatically, the only solution is using javascript:

function changeFigureContent(figure)
{
  var width = figure.children('img').width();
  figure.children('figcaption').css('width', width)
}

window.addEventListener('load', function(){
  $('figure').each(function(k, v){
    changeFigureContent($(v));
  })
})

*{margin:0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure>
  <img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fih0.redbubble.net%2Fimage.236642016.7494%2Fap%2C550x550%2C12x16%2C1%2Ctransparent%2Ct.png&f=1">
  <figcaption>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nulla et nunc mattis mollis. Donec ornare ornare nibh, tempor elementum magna molestie vitae. Donec posuere felis vitae sapien suscipit, vel ultricies justo feugiat. Pellentesque semper
    neque mi, eget venenatis turpis faucibus quis. Maecenas a odio odio. Etiam velit felis, tincidunt at feugiat sit amet, condimentum eget eros. Cras nec mauris non justo ullamcorper dignissim. Nullam vel nulla sit amet neque aliquet ullamcorper consectetur
    laoreet sapien. Etiam convallis est libero, et finibus tellus tempus id. Ut imperdiet vestibulum nisi id venenatis. In eget justo vel purus hendrerit congue eget eu ante. Suspendisse non erat eget nisl facilisis volutpat. In consequat est nec lacus
    fringilla, at varius tortor vehicula. Morbi dui arcu, efficitur nec sagittis vitae, vulputate eget leo.
  </figcaption>
</figure>

Answer 2

You can simply set the width to be 100% on your image. Just add 'width: 100%;' into your img style tag to test, like so:

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

Or make it into a class :

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

The "display: block" just ensures your img is always in it's own block, regardless of width. i.e. your text won't appear next to it, only under or above it.

Answer 3

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>