CODEWITHSUNDEEP
htmlcss
user3152131
user3152131

Reputation: 553

can't get image to fit inside a div

http://www.bootply.com/NvzXHCBGk7

I am trying to get an <img > to fit inside the div it is in, but not able to. How can I get the img to be the same size as the "well"?

<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
  <div class="row">
    <div class="item">
      <div class="well">
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </div>
    </div>
  </div>
</div>

css;

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 

}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.item img {

}

.well {
 position:relative;
 display: block;
 max-height: 200px;
}

Upvotes: 1

Views: 1739

Answers (9)

Jobs
Jobs

Reputation: 259

What you have to do is in your css
div.well img {
 width:100%;
 height:100%;
}

but if it is not the case, that meant to fit the image with any div

think this is your html,

<div class="imageholder">
  <img clss="imageowner" src=""/>
</div>

then in your css file

div.imageholder{
 width:400px; /*any width you want*/
 height:400px; /*any height you want */
}

img.imageowner{
 width:100%;
 height:100%;
}

Upvotes: 0

Sfl
Sfl

Reputation: 20

Add on your image tag this class:

<img class="img-responsive" src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">

Don't put more css on your style. Bootstrap already have that for you.

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class.

This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

I remove this text from the Boostrap website.

Hope that help you.

Upvotes: 0

Srinivasan Lakshmanan
Srinivasan Lakshmanan

Reputation: 433

you have to remove the "max-height: 200px;" in the .well class

.well {
    display: block;
    /*max-height: 200px;*/
    position: relative;
}

and need to add "img-responsive" class in the img tag

Demo Link

Upvotes: 0

Rovi
Rovi

Reputation: 259

if the image size is larger than the width you can have this css added

.item img {
  max-width: 100%;
}

if the image is smaller than add

.item img {
  width: 100%;
  max-width: 100%;
}

Also bootstrap provides the class="img-responsive" for the img tag

Upvotes: 0

Prajwal Shrestha
Prajwal Shrestha

Reputation: 553

try this code 

.item img {
width:100%;
}

Please check out this link https://jsfiddle.net/2x69rr9a/

Upvotes: 0

Guille
Guille

Reputation: 652

I believe that is what you wanted. marked css with comments new so you know what i added. You just had the wrong parent div selected for img. it was supposed to be well rather than item as you had it.

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 
  
}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

/*changed item for well class*/
.well img {
    width: 100%; /*new */
    height: 100%;/*new */
}

.well {
 position:relative;
 display: block;
 max-height: 200px;
}
<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
  <div class="row">
    <div class="item">
      <div class="well">
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </div>
    </div>
    <div class="item">
      <div class="well">
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </div>
    </div>
    <div class="item">
      <div class="well">
        3 blah blah blah blah blah blah blah blah h
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Arjun
Arjun

Reputation: 3793

Here is the answer. Try RUNNING THE SNIPPET

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 

}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.item img {
  display: block;
  max-width: 100%;
  height: auto;
}

.well {
 position:relative;
 display: block;
 max-height: 200px;
}
<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
  <div class="row">
    <div class="item">
      <div class="well">
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </div>
    </div>
  </div>
</div>

Just appended the properties to Image as 

.item img {
  display: block;
  max-width: 100%;
  height: auto;
}

Upvotes: 1

TheQuestioner
TheQuestioner

Reputation: 722

you can inherit the parent div's width/height attribute to obtain this

img {
    width: inherit;
    height: inherit;
}

Upvotes: 0

Shaiwal Tripathi
Shaiwal Tripathi

Reputation: 627

You can do it like this

.item img {
width: 100%;
height:100%;
}

Upvotes: 2

Related Questions