app-myapp/app/tab1/tab1.page.scss

ion-content {
  --ion-background-color: #f2f2f2;
  padding: 16px;
}

ion-searchbar {
  margin-bottom: 16px;
}

.photo-container {
  display: flex;
  flex-wrap: wrap; /* 允许图片换行 */
  gap: 8px; /* 图片之间的空隙 */
  justify-content: flex-start; /* 左对齐排列 */
}

.photo-wrapper {
  width: calc(50% - 8px); /* 每张图片容器宽度为父容器宽度的一半减去间隙 */
  margin-bottom: 8px; /* 底部间隙 */
  box-sizing: border-box; /* 包含内边距和边框的大小 */
}

.photo-wrapper:nth-child(2n+1) {
  margin-right: 8px; /* 每行第一张图片右侧间隙 */
}

ion-img {
  width: 100%; /* 图片宽度 100% */
  height: auto; /* 自动调整高度 */
  object-fit: cover; /* 裁剪图片以填充容器 */
  border-radius: 8px; /* 图片圆角 */
}