如何使用css设置相同的图像高度和宽度？不是背景图片[重复]答案

【问题标题】：How to set same height and width of image using css? Not background image [duplicate]如何使用css设置相同的图像高度和宽度？不是背景图片[重复]
【发布时间】：2017-11-05 08:11:42
【问题描述】：

我必须设置具有相同高度和宽度的图像。我有三个具有不同高度和宽度的图像。我必须在框中显示相同的尺寸。你会在这方面帮助我吗？

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>

【问题讨论】：

既然背景图有最好的浏览器支持，为什么不能用呢？
因为我正在从数据库中获取图像，但我不知道如何使用带有数据库的 CSS 来显示图像
LGSon 先生，我的问题不重复。那个答案是一张令人失望的背景图片，我问的是没有背景的。
您自己在评论中将这个欺骗链接链接到我的答案，并说在背景的帮助下，我已经找到了答案。重复链接还包含显示您现在接受的解决方案的答案，因此它是重复的
我已经在问题中提到我不想使用背景图片，因为在背景的帮助下我找到了答案。我想没有背景。

标签： html css

【解决方案1】：

只需添加ul li img 类的height: 100%; 就可以了

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>

【讨论】：

【解决方案2】：

为您的图像添加恒定高度

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>

【讨论】：