Question

在my site上，我试图让我的图片仅在移动设备上填充视口宽度，但是网格上有填充，所以当在移动设备上时，那就是那个位两边的白色空间。

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

标记：

<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?

查看您的网站，您的图片不会扩展为完整视口的原因是因为您的容器。容器上有一个垫子。绕过此填充的一种方法是使用负余量，例如margin:auto -20px;。

最佳解决方案是考虑使用媒体查询并解决问题，可能在移动视图期间修改容器等。

希望这会有所帮助。

Answer 2

@media screen and (min-width: 640px)
 .grid-6, .grid-full {
 width: 100%;
 margin: 0;
}

@media screen and (min-width: 480px)
 .container {
 width: 100%;
}

我相信它会起作用。）

全视口宽度

2 个答案: