介绍网站

这是一个使用 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 */  
}