加拿大风光

加拿大风光

加拿大这片风景如画的土地,拥有绚丽的枫叶、白雪覆盖的山峰、绿松石般的湖泊和多伦多现代都市。在这个摄影展中沉浸于美景之中,你会发现使用 MDX 和 Tailwind CSS 类来复现这些效果是多么简单。

这些图片使用了 next/image 组件进行优化加载。本地存储的图片位于以下路径的文件夹中:/static/images/canada/[文件名].jpg

由于我们使用 MDX,只需几个 Tailwind CSS 类就能创建一个简单的响应式弹性盒子网格来展示图片。


摄影画廊

枫叶
湖泊
山脉
多伦多

实现方式

<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![枫叶](/static/images/canada/maple.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![湖泊](/static/images/canada/lake.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![山脉](/static/images/canada/mountains.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![多伦多](/static/images/canada/toronto.jpg)
  </div>
</div>