图片右侧不适合移动浏览器 window

Question

我做了几张 400x300 像素的图片。他们每个人都包含一个带有边框的字母。如果我在移动浏览器中打开图像比屏幕大。我在 Chrome、Firefox、Opera 浏览器中试过，结果相同。该问题仅存在于移动 phone 上。即使在响应式视图中，桌面计算机也没有问题。

如果我设置一个较低的最小值，比方说 300px，那么图片适合显示。 grid-template-columns: repeat(auto-fill, minmax(400px,1fr)); 我的 phone 的显示器是 720px 宽，所以我不知道为什么如果我将它设置为 400px 则右侧不可见。

我上传了html到这个website

On my phone this is the result

我的目标是在不滚动的情况下使内容适合任何 phone 的显示。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
    body{
      background-color: gray;
    }

    .container{
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
      width: 100%;
    }

    .card{
      background-color: lightgray;
    }

    .card img{
      display: block;
      width: 100%;
      /* object-fit: contain; */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">
      <img src="a.png" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="card">
      <img src="b.png" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="card">
      <img src="c.png" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="card">
      <img src="d.png" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="card">
      <img src="e.png" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</body>
</html>

Answer 1

.card img{
  display: block;
  width: 100vw;
}

使用vw（视口宽度）可以解决这个问题。（或者您也可以从视口元标记中删除 initial-scale=1.0。）

图片右侧不适合移动浏览器 window

Right side of the Image not fit in mobile browser window

html

css

grid