<div class="text-center">
<div class="img-thumbnail image">
<img src="https://i.ytimg.com/vi/X6yM6HLADbE/maxresdefault.jpg" alt="fela kuti" class="img-responsive">
<p>Fela Kuti's typical stage perfromance attire</p>
</div>
</div>
I’m finding it difficult to make the image fit into the thumbnail. Its always overflow out of the box. Is there a way too resize the image to fit the box with css or anything. I’m not really good with the question, I hope you understand what I’m trying to ask.
If it helps.
Codepen link
And I need help centering the image also, margin: 0px auto; dont seem to work.
You are using Bootstrap 4 in your Codpen settings, but you are using Bootstrap 3 syntax for making your images responsive. Replace img-responsive in the img tag below with img-fluid and your image will be responsive as the page width shrinks.
<img src="https://i.ytimg.com/vi/X6yM6HLADbE/maxresdefault.jpg" alt="fela kuti" class="img-responsive">
Thank you very much @camperextraordinaire. It worked. I’d just like to know how I was able to center the image. Was it with the text-center class?