html - 全视口(viewport)宽度

Question

关于 my site ，我试图让我的图像仅在移动设备上填充视口(viewport)宽度，但是对于网格有填充，所以在移动设备上时两边都有一点空白。

示例:在 Microsoft's site 上，当您调整浏览器大小时，填充在主图像上消失并填充视口(viewport)的宽度，但缩略图保留其填充。我想要实现的是主图像上发生的事情。

标记:

<div class="container">
  <section class="row cf">
    <div class="grid-full">
        <article>
          <img src="/path/to/image/sample.jpg" />
        </article>
    </div>
  </section>
</div>

CSS:

.container {
  max-width: 1000px;
  width:92%;
  margin:0px auto;
  position: relative;
}

.grid-full {
  float: left;
  width:96.969696969697%;
  margin:0 1.515151515152% 1em;
}

我试过填充、边距和宽度，但我没有成功。

Answer 1

最好的答案是使用 css 媒体查询。 这允许您通过检查某人的屏幕宽度(基本上是他们使用的设备)来动态更改您的 css。

相关信息可在此处找到。 What does @media screen and (max-width: 1024px) mean in CSS?

查看您的网站，您的图像不会扩展为完整视口(viewport)的原因是您的容器。容器上有一组填充物。解决此填充的一种方法是使用负边距，例如 margin:auto -20px;。

最好的解决方案是考虑使用媒体查询并解决该问题，可能在移动 View 期间修改您的容器等。

希望这对您有所帮助。