css - 古腾堡画廊 block - 修复相同尺寸的图片

Question

我只想分享 G​​utenberg gallery 的快速修复，因为我在其他地方找不到修复。将修复什么:

• 问题:如果您将不同尺寸的图像上传到您的画廊，缩略图会在每一行中以不同的高度显示。 修复:所有图片都将呈方形。
• 问题:将 4 张照片添加到 3 行 Gutenberg Gallery Block 时，总是第 4 张图片占满容器的整个宽度。 固定:每张图片将保持相同的宽度。

Gutenberg Gallery Block 第 4 行图像尺寸问题:

Gutenberg Gallery Block 相同大小修复:

Answer 1

简单的 CSS 修复:

.wp-block-gallery.has-nested-images figure.wp-block-image img {
  aspect-ratio: 1; /* squared size thumbnails */ 
}
.wp-block-gallery.has-nested-images figure.wp-block-image {
  flex-grow: 0; /* width fix */ 
}