如何移除iPhone端Div行间距并使所有Div内图片为正方形？

Hey there! Let's fix those two issues you're facing on iOS—extra gaps between your image rows and getting all images to be perfect squares. Here's a step-by-step solution:

1. Fix Extra Gaps Between Rows #

First, let's break down why those unwanted gaps are showing up:

• Your current .img width (47vw) plus margin-right:1vw means three images take up way more than 100% of the screen width, forcing them to wrap onto new lines. That creates the illusion of extra gaps between rows.
• The margin-bottom:14vw on .line might also be adding more space than you need.

Here's the fix:

• Use gap instead of margin-right for cleaner flex spacing
• Calculate the correct width for each image so three fit perfectly in one row
• Adjust the line spacing to your preference

Update your CSS for .line and .img:

.images .line {
  margin-bottom: 8vw; /* Tweak this value for your desired row spacing, set to 0 if you want no gap */
  margin-left: 2vw;
  margin-right: 2vw;
  display: flex;
  gap: 1vw; /* Replaces margin-right for consistent spacing between images */
  flex-wrap: nowrap; /* Ensures images stay in one row */
}

.images .line .img {
  cursor: pointer;
  position: relative;
  text-align: center;
  /* Calculate width: subtract gaps (2 gaps for 3 images) from available width, divide by 3 */
  width: calc((100% - 2 * 1vw) / 3);
  height: calc((100% - 2 * 1vw) / 3); /* Match width to keep square shape */
  /* Remove margin-right since we're using gap */
}

2. Make All Images Perfect Squares #

Right now, your images are sized to 100% width but not constrained by height, so they keep their original aspect ratio. To force them into square containers without stretching:

• Set the image's height to 100% to match the container
• Use object-fit: cover to crop the image to fit the square while preserving its aspect ratio

Update the image CSS:

.images .line .img img {
  width: 100%;
  height: 100%; /* Add this to match container height */
  position: absolute;
  left: 0;
  top: 0; /* Ensure image starts at the top of the container */
  object-fit: cover; /* Crop image to fill square without stretching */
}

Also, clean up the .img-wrap style since the flex alignment isn't needed with absolute positioning:

.images .line .img .img-wrap {
  height: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
  background: #fff;
  display: block; /* Replace flex with block for simpler layout */
}

Bonus: Global Reset to Avoid iOS Rendering Quirks #

Add this at the top of your CSS to eliminate default browser margins/paddings and ensure consistent box sizing:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

These changes should make your images fit into neat 3-column rows with no extra gaps, and every image will stay a perfect square on iOS devices.

内容的提问来源于stack exchange，提问作者user1788736