CODEWITHSUNDEEP
htmlcss
dancemc15
dancemc15

Reputation: 628

How do I fit an image into a div box with description?

I am trying to create a box that contains both an image and description under the image. Currently, my image overflows the box. I also want to be able to create a row of these boxes. How do I fix this? Thanks!

https://jsfiddle.net/br136ofp/

HTML below:

    <div class="img">
      <a href="#"><img class="image" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></a>
      <br>Blah blah blah blah blah
      <p>sdfsdfsdfsdfssdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf</p>
      </div>

CSS below:

 div.img {
     margin: 5px;
     float: left;
     width: 180px;
 }

 img.image {
   max-width:400px;

 }

Upvotes: 0

Views: 57

Answers (4)

Johannes
Johannes

Reputation: 67748

Make the DIV an inline-block and add width: 100%; to the image (not only max-width):

https://jsfiddle.net/yu3sqgp8/1/

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53664

To make your demo work, you need to set the image to max-width: 100% so it won't overflow the parent, and either put spaces in the text, or use word-break: break-all so the text won't overflow the parent.

div.img {
  margin: 5px;
  float: left;
  width: 180px;
  word-break: break-all;
}
img.image {
  max-width: 100%;
}
<div class="img">
  <a href="#"><img class="image" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></a>
  <br>Blah blah blah blah blah
  <p>sdfsdfsdfsdfssdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf</p>
</div>

Upvotes: 2

sol
sol

Reputation: 22919

.img {
  margin: 5px;
  float: left;
  width: 180px;
}

img {
  width: 100%;
  height: auto;
}
<div class="img">
  <a href="#"><img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></a>
  <p>sdfsd fsdfsdfss dfsdfsdfs dfsdfsdfs dfsdfsdf sdfsdf</p>
</div>

Upvotes: 1

Roy Bogado
Roy Bogado

Reputation: 4472

You should try:

img.image {
   width:100%
 }

Upvotes: 1

Related Questions