Created
August 2, 2018 04:07
-
-
Save letswritetw/1fc830f2d3537ebe048eb4165f785b70 to your computer and use it in GitHub Desktop.
像Medium的漸近式圖片加載
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .lazy-image | |
| text-align: center | |
| // img 先把透明度調成 0，才有淡入的效果 | |
| img | |
| opacity: 0 | |
| transition: opacity 1s linear | |
| // 將區塊等比例撐開 | |
| .small | |
| width: 100% | |
| height: 0 | |
| background-size: cover | |
| background-position: center center | |
| // 圖片淡入 | |
| &.show img | |
| opacity: 1 | |
| // 16:9 | |
| &.w16-9 .small | |
| padding-bottom: 56.25% | |
| // 4:3 | |
| &.w4-3 .small | |
| padding-bottom: 75% |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment