How to set same height and width of image using css? Not background image

Question

I have to set images with same height and width.I have three images with different height and width. I have to display the same size in the box. Would you help me in this?

ul {
  list-style: none;
}

ul li {
  width: 200px;
  height: 200px;
  display: inline-block;
  border: 1px solid #000;
}

ul li img {
  width: 100%;
}

<ul>
  <li><img src="http://i.imgur.com/tI5jq2c.jpg"></li>
  <li><img src="http://i.imgur.com/37w80TG.jpg"></li>
  <li><img src="http://i.imgur.com/B1MCOtx.jpg"></li>
</ul>

Since background image has the best browser support, why can't you use that? — Asons, Jun 04 '17 at 13:00
Because I am fetching Images from database and I don't know how to display images using CSS with database — Naren Verma, Jun 04 '17 at 13:13
Mr.LGSon, My question is not duplicate. That answer is a displaing background image and I am asking without background. — Naren Verma, Jun 04 '17 at 14:48
You yourself linked this dupe link in a comment to my answer, saying _With the help of background, I already found the answer_. The dupe link also contain answers showing the solution you now accepted, hence it is a duplicate — Asons, Jun 04 '17 at 14:55
I already mentioned in the question that I don't want to use background image because with help of background I found the answer. I want to do without background. — Naren Verma, Jun 04 '17 at 15:09

score 0 · Answer 1 · answered Jun 04 '17 at 12:16

add constant height to your images

ul {
  list-style: none;
}

ul li {
  width: 200px;
  height: 200px;
  display: inline-block;
  border: 1px solid #000;
}

ul li img {
  width: 100%;
  height: 200px;
}

<ul>
  <li><img src="http://i.imgur.com/tI5jq2c.jpg"></li>
  <li><img src="http://i.imgur.com/37w80TG.jpg"></li>
  <li><img src="http://i.imgur.com/B1MCOtx.jpg"></li>
</ul>

score 0 · Accepted Answer · edited Aug 29 '17 at 19:38

Just add height: 100%; of class ul li img and it will work

ul{
   list-style: none;
}
ul li{
 width: 200px;
 height: 200px;
 display: inline-block;
 border: 1px solid #000;
}
ul li img{
 width: 100%;
 height: 100%;
}

<ul>
    <li><img src="http://i.imgur.com/tI5jq2c.jpg"></li>
    <li><img src="http://i.imgur.com/37w80TG.jpg"></li>
    <li><img src="http://i.imgur.com/B1MCOtx.jpg"></li>
</ul>

How to set same height and width of image using css? Not background image

2 Answers2