Image Flex konzentriert sich auf andere Geräte, jedoch nicht auf meinen Laptop

Question

Ich erstelle eine Webseite und stoße auf ein Problem. Auf dem Flex meiner Seite werden vier Bilder angezeigt. Wenn ich auf „Inspizieren“ klicke und sehe, wie sie auf anderen Geräten angezeigt werden, sehe ich, dass es welche gibt 2 Bilder oben und 2 weitere Bilder unten. Geben Sie hier eine Bildbeschreibung ein

Aber wenn ich zurückgehe und es auf meinem Laptop anzeige, sehe ich oben drei Bilder und unten ein Bild. Geben Sie hier eine Bildbeschreibung ein

Ich möchte wissen, was ich tun kann, um das Problem zu beheben, sodass immer die Bilder des ersten Bildes angezeigt werden (2 oben, 2 unten).

Dies ist ein Teil meines Codes

img {
width: 350px;
padding: 5px;
transition: transform .2s;
}

img:hover {
cursor: pointer;
transform: scale(1.03);
}

.container {
margin-top: 80px;
display: flex;
max-width: 1500px;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

P粉779565855 · Answer

浏览器将在一行上容纳尽可能多的宽度为 350 像素的图像。如果不适合，它会将它们换行到下一行。

如果您希望弹性框中每行始终有两个图像，您可以将图像的宽度设置为屏幕宽度的 50%。因为每边都有 5px 的填充，所以您可以使用 calc() 函数从 50% 中减去它，如下所示：

width: calc(50% - 10px);

以下是您的代码的示例：

img {
  width: calc(50% - 10px);
  padding: 5px;
  transition: transform 0.2s;
}

img:hover {
  cursor: pointer;
  transform: scale(1.03);
}

.container {
  margin-top: 80px;
  display: flex;
  max-width: 1500px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}