如何在视口中拟合图像？

Question

对于given source code of webpage：

以下是修改过的css：

img {
   float: left; /* existing line of code */
   width: calc(98%/3);
}
img#img1 {
  margin-right:10px;
} 
img#img2 {
  margin-right:10px;
}

但测试结果不成功。

在css代码更改后，为什么正确的图像仍然在视口中刷新？如下图所示：

注意：仅建议使用CSS代码更改

Answer 1

您需要减去20px以考虑第二张图片每侧的10px页边距：

img {
  float: left;
  width: calc((100% - 20px) / 3);
}

img {
  float: left;
  width: calc((100% - 20px) / 3);
}
img:nth-of-type(2) {
  margin: 0 10px;
}
body {
  margin: 0;
}

<img src="//placehold.it/200" />
<img src="//placehold.it/200" />
<img src="//placehold.it/200" />

Answer 2

@Josh Crozier @overexchange @Josh Crozier提供的代码解决了这个问题，也可以用#imgid和其他方式来解决。对于本课程的这一部分，两个答案都足够好。

检查你的代码后，我发现@（）和/ 3之间没有空格，如下所示：

img {
  float: left;
  width: calc((100% - 20px)/3);
}

这使得css3无法进行计算，就像媒体查询一样，空间是必要的ex： @media屏幕和（查询）{} - ＆gt;工作@media屏幕和（查询）{} - ＆gt;不起作用

编辑：我的意思是不能在每个端口上工作，尴尬的部分是教授在答案上做同样的事情

所以这是一个可以接受的答案

img {
  float: left;
  width: calc((100% - 20px) / 3);
}
img:nth-of-type(2) {
  margin: 0 10px;
}
body {
  margin: 0;
}

很抱歉这么晚才回答我现在刚刚遇到这个帖子，但是会留给那些为此奋斗的人... 我可能犯了一些英语错误，也不好意思，这不是我的母语，祝你好运