Last active
July 10, 2018 06:05
-
-
Save JSoon/c39bca0656a9903b5838033d57fca7e5 to your computer and use it in GitHub Desktop.
缩略图高度不塌陷DOM结构及样式，使用该布局方式，能够实现在图片尚未加载完成前，保证页面高度不会因此受到影响。
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>缩略图高度不塌陷DOM结构及样式</title> | |
| <style> | |
| .thumbnail { | |
| position: relative; | |
| width: 400px; | |
| overflow: hidden; | |
| } | |
| .thumbnail::after { | |
| content: ""; | |
| display: block; | |
| /* 根据图片长宽比例计算图片高度百分比，计算方式由所选用的预编译工具语法而定，这里举例采用了CSS的calc()方法 */ | |
| padding-top: calc(300/400*100%); | |
| /* 这里也可以根据需要，进行缺省背景图片或颜色的填充 */ | |
| background-color: #333; | |
| } | |
| .thumbnail .thumb-link { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .thumbnail .thumb-img { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="thumbnail"> | |
| <a class="thumb-link" href="#" target="_blank"> | |
| <img class="thumb-img" src="http://placehold.it/400x300" alt=""> | |
| </a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment