Question

我希望在每行4张图片中制作100％的完整页面。但是如果你调整窗口大小，你将获得3张图像，而不是2张图像，直到剩下1张。经过研究，我在@media填写整页而没有得到任何空格。现在我已经制作了这个jsfiddle但是如果你调整结果窗口的大小，你会看到没有填充的空格。我做错了什么？

@media only screen and (min-width : 354px) {
 /* Smartphone view: 1 tile */
.image{
   width: 100% }

https://jsfiddle.net/8hfLkb3k/

图像始终必须填充两个宽度，如果宽度为50％，则两个图像必须填充50％。

感谢。

Answer 1

您的图片（<img>元素）未扩展到.image容器的整个宽度，因为您错过了此规则，您可以将其添加到CSS中：

.image img {
  width: 100%;
}

您的示例代码已更新，以显示此功能：

＆＃13;

.image img {
  width: 100%;
}
.f_left {
  float: left;
}
@media only screen and (min-width: 354px) {
  /* Smartphone view: 1 tile */
  .image {
    width: 100%;
  }
}
@media only screen and (min-width: 708px) {
  /* Smartphone view: 2 tile */
  .image {
    width: 50%;
  }
}
@media only screen and (min-width: 1062px) {
  /* Small desktop / ipad view: 3 tiles */
  .image {
    width: 33.3%;
  }
}
@media only screen and (min-width: 1417px) {
  /* Medium desktop: 4 tiles */
  .image {
    width: 25%;
  }
}

＆＃13;

<div class="image f_left">
  <img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
  <img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
  <img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
  <img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>

＆＃13;

Answer 2

我建议您使用max-widths进行媒体查询，但不必这样做，只要您所做的事情能够为您提供预期的正确结果。

在我的工作示例中，我选择将单图像容器设置为25％，除非视口宽度发生变化。

在1024,767和600我选择了1/3和1/2尺寸，最后选择了100％宽度。

我希望这就是您的意思，但您可以根据需要随意调整此代码，尤其是将媒体查询视口属性与您希望的内容相匹配。

* {
  box-sizing: border-box;
}
.one-image {
  width: 25%;
  float: left;
  border: 1px solid red;
}
.one-image img {
  width: 100%;
  border: 1px solid blue;
  display: block;
}
@media screen and (max-width: 1068px) {
  .one-image {
    width: 33.33%;
  }
}
@media screen and (max-width: 767px) {
  .one-image {
    width: 50%;
  }
}
@media screen and (max-width: 600px) {
  .one-image {
    width: 100%;
  }
}

<div class="one-image">
  <img src="http://placehold.it/200x200">
</div>
<div class="one-image">
  <img src="http://placehold.it/200x200">
</div>
<div class="one-image">
  <img src="http://placehold.it/200x200">
</div>
<div class="one-image">
  <img src="http://placehold.it/200x200">
</div>

@media宽度没有填满整页，我做错了什么？

2 个答案: