网格布局中旋转横向图片适配垂直空间且避免裁剪的方法

问题描述 #

我用WordPress图库生成了网格布局，做响应式设计时，希望通过调整网格结构并旋转图片来填充垂直跨行的空白区域。但当前旋转图片时，图片会被原容器尺寸裁剪，且网格区域也跟着旋转错位。需要实现无裁剪的图片旋转效果（图中黑色为垂直空白区域，棕色为其他图片，蓝色为旋转后的网格区域）。

现有HTML代码 #

<div class="entry-content"> 
<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-7 is-layout-flex"> 
<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="625" height="208" data-id="69"  src="http://localhost/bouwqunst/wp-content/uploads/2023/07/huislab.png" alt="" class="wp-image-69" srcset="http://localhost/iets/wp-content/uploads/2023/07/iets.png 625w, http://localhost/iets/wp-content/uploads/2023/07/iets-300x100.png 300w" sizes="(max-width: 625px) 100vw, 625px" /></figure>
...
</figure>
</div>

现有CSS代码 #

figure.wp-block-gallery.has-nested-images {
display: grid;
grid-auto-rows: 10vw;
grid-template-columns: 10vw 20vw 38vw 20vw 10vw ;
column-gap: .5vw;
row-gap: .5vw;}

figure.wp-block-gallery.has-nested-images  .wp-block-image {
width: auto !important;
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
filter: sepia(100%);
transition: filter .5s ease-in-out;}

#section-vertical figure.wp-block-gallery.has-nested-images  .wp-block-image:nth-child(1){transform: rotate(-90deg) translateX(-100%) translateY(-30%);transform-origin: top left; }

问题示意图 #

解决方案 #

1. 移除容器裁剪限制 #

WordPress默认的is-cropped类会给网格容器添加overflow:hidden，这是图片被裁剪的核心原因，先解除这个限制：

figure.wp-block-gallery.has-nested-images.is-cropped {
  overflow: visible !important;
}

2. 调整旋转图片的网格占位与定位 #

旋转90度后图片宽高互换，需要给目标图片容器设置正确的网格占据范围，同时调整旋转定位参数：

#section-vertical figure.wp-block-gallery.has-nested-images .wp-block-image:nth-child(1){
  /* 让容器占据3行1列的网格空间，匹配旋转后的图片高度 */
  grid-row: span 3;
  grid-column: 1;
  /* 精准定位旋转后的图片，避免错位 */
  transform: rotate(-90deg) translateY(-100%);
  transform-origin: top left;
  /* 设置容器最小高度，适配旋转后的图片尺寸 */
  min-height: 30vw; /* 对应grid-auto-rows:10vw × 3行 */
  margin: 0; /* 清除默认边距，避免挤压网格 */
}

3. 确保图片无裁剪自适应 #

给旋转图片内部的img标签设置自适应规则，保证图片完整显示：

#section-vertical figure.wp-block-gallery.has-nested-images .wp-block-image:nth-child(1) img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain; /* 保持图片比例，完整显示不拉伸 */
}

4. 响应式适配调整 #

小屏幕下取消旋转，恢复正常布局，避免显示错乱：

@media (max-width: 768px) {
  figure.wp-block-gallery.has-nested-images {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 25vw;
  }
  #section-vertical figure.wp-block-gallery.has-nested-images .wp-block-image:nth-child(1){
    transform: none;
    grid-row: span 1;
    min-height: auto;
  }
}

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