图片样式演示

2025-03-24

在浏览 Herman Martinus 的博客时，我发现他在 Bear Blog 模板中增加了一种图片样式，这种样式会将照片裁剪成正方形并缩小，让一屏宽度正好显示两张照片。这非常适合将多张照片放在一起制作四宫格的画廊。

我修改了 hugo-bearblog 主题，添加了该样式。你只需要在 Front Matter 增加一行：

YAML

img-style: true

TOML

img-style = true

效果如下：

以上是测试效果

实现途径

我在 layouts/partials/custom_body.html 里添加了如下代码：

{{ $params := .Page.Params }}
{{ $imgStyle := index $params "img-style" | default false }}
{{ if $imgStyle }}
<style>
img {
    max-height: 350px;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
}

@media (hover: hover) {
  img:hover {
    transform: scale(1.5);
    transition: 0.5s;
  }
}
</style>
{{ end }}