如何使用css设置相同的图像高度和宽度？不是背景图片

Question

我必须设置相同高度和宽度的图像。我有三个不同高度和宽度的图像。我必须在框中显示相同的大小。你能帮帮我吗？

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>

Answer 1

为图像添加恒定高度

＆＃13;

＆＃13;

ul {
  list-style: none;
}

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需添加height: 100%;类的ul li img即可

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>