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

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:

  
  

    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.
  

Or make it into a class :

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

  
  

    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.
  

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.