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

  

  

    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.
  

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

*{margin:0}

  
  

    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.
  

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}

  
  

    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.