最大化img的大小答案

【问题标题】：Maximizing size of img最大化img的大小
【发布时间】：2017-01-04 16:42:25
【问题描述】：

所以，我正在做一些事情，我正在尝试创建一个位于另一个 div 内的图像标签。问题是，我写了

.container {
  padding: 0;
  margin: 0;
}

.container img {

  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;

}

<div class='container'>

  <img src='https://www.clarkson.edu/_site_support/background_image_banks/images/tor_images/studcnt_4128800003.jpg' alt='A problem occured'>

</div>

但在边缘之前仍有一些空间。我还尝试将填充设置为 0，将边距设置为 0，但仍然没有。

【问题讨论】：

父级的margin也是0吗？请发布您的代码的最小示例，不要链接到它。
正文有边距。如果你想让图片的高度包含所有剩余的空格，你应该使用height: 100vh;
@kabanus 我确实设置了父级的边距。而且，对不起，我编辑了这篇文章，使它更简洁。
@Ron.Basco 那行不通。它只是变成了一个高度为 100px 的图像
我已经在你的 codepen 演示中试过了。 vh = 观看高度。无论视口的高度是多少，它都会得到它的 100% 并应用于具有 vh 属性的元素。

标签： html css image sass formatting

【解决方案1】：

将body margin设为0px;

body {
   margin: 0px;
}

【讨论】：

欢迎。 @Guy Blum

【解决方案2】：

在 css 中使用重置文件或结构将值设置为定义的默认值，而不是让浏览器得到它。我使用的重置文件之一来自这里 http://meyerweb.com/eric/tools/css/reset/ 。在这种情况下，body 的边距为 8px，并且由于没有定义 box-sizing，它会影响宽度。试试看。

【讨论】：

【解决方案3】：

试试这个代码

body,html{
margin:0px;
padding:0px;
}

【讨论】：

【解决方案4】：

设置浮动属性以摆脱多余的空间：

div img { float: left }

但是关于图片的大小你需要记住，如果div的宽/高设置为百分比，则内部元素的宽/高不能设置为百分比。

如果您想以百分比设置图像宽度/高度，则需要以像素为单位指定 div 的尺寸。

例如

这行得通：

div {
    width: 600px;
    height: 400px;
}
div img {
    width: 100%;
    height: 100%;
}

但这不起作用：

div {
    width: 100%;
    height: 100%;
}
div img {
    width: 100%;
    height: 100%;
}

总的来说，您需要处理问题的两个部分是这样的：

div {
    width: 100%;
    height: 100%;
}
img {
    float: left; /* or right, whatever you'd rather */
    display: block;
}

不过，为了获得更好的建议，需要有关 div 容器的信息。

【讨论】：