旋转水平图像以适应网格中的垂直空间

Question

我有一个网格，其中包含来自（wordpress）画廊的项目。在制作响应式布局时，如果我有垂直空间（行跨度）来覆盖该空间，我希望能够调整网格并旋转图像。当我现在旋转 img 时，它会被裁剪为原始大小。网格区域似乎在旋转。

如何旋转而不裁剪？请参阅图像中的黑色垂直空间，其他图像为棕色。 具有不同的跨度，蓝色为旋转的网格区域。

#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; }