介绍网站
这是一个使用 Gatsby 框架构建的网站，它采用响应式布局设计，具有美观的图片展示效果。
HTML结构
.gatsby-image-wrapper:图片容器，设置为相对定位和隐藏溢出内容。picture.object-fit-polyfill:Polyfill 对象，用于兼容旧版本浏览器中不支持object-fit属性的情况。img:图片元素，设置绝对定位并覆盖整个容器。[data-main-image]:主要图片元素，设置透明度和过渡动画。.gatsby-image-wrapper-constrained:限制容器，用于将主要图片元素显示在一行内。
CSS样式
.gatsby-image-wrapper {
position: relative;
overflow: hidden;
}
/* Polyfill for object fit */
.gatsby-image-wrapper picture.object-fit-polyfill {
position: static !important;
}
/* Image style */
.gatsby-image-wrapper img {
bottom: 0;
height: 100%;
left: 0;
margin: 0;
max-width: none;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
object-fit: cover;
}
/* Transition for opacity */
.gatsby-image-wrapper [data-main-image] {
opacity: 0;
transform: translateZ(0); /* Make sure to set the translateZ value to avoid a flash of white */
transition: opacity .25s linear; /* Standard syntax */
}
.gatsby-image-wrapper [data-main-image]:hover { /* Change on hover */
opacity: 1; /* Set to full opacity (1) over a half second duration for smooth transition */
}
