Question

我正在尝试在html / css中显示矩形图像，但是图像区域显示为正方形。表示图像可以正确显示，但是图像上方和下方都有空白。

我尝试在html中的image属性上设置图像的高度和宽度，但是还是没有运气。

<img src="images/countries/071-serbia.png" style="width:360px;height:240px;">

和CSS

img{
  display: block;
  max-width:auto;
  max-height:240px;
  width: auto;
  height: auto;
}

我在做什么错？图片大小应为宽度360高度240。

Answer 1

那是因为您没有进行CSS重置。

尝试：

* {
  padding: 0;
  margin: 0;
}

img{
  display: block;
  max-width:auto;
  max-height:240px;
  width: auto;
  height: auto;
}

<img src="http://lorempixel.com/360/240/" style="width:360px;height:240px;">

Answer 2

尝试编写随附的代码肯定可以正常工作，如果在注释中没有让我知道，我会尽力帮助您。

我有一个建议，不是像px和%，而是像vw那样使用视口单位作为宽度和vh表示高度，因为它可以帮助您提高网页的响应速度。

img{
  display: block;
  max-width: 26.354vw;
  max-height: 36.529vh;
}

<!DOCTYPE html>
<html>
<head>
  <title>Images</title>
</head>
<body>
<img src="Images\sample1.jpg">
</body>
</html>