figure{ position: relative; } .fig-default{ position: relative; .fig-img-wrapper{ position: relative; .paddingT{ padding-top: 100%; } img{ position: absolute; top:0; bottom:0; left:0; right:0; display: block; max-height:100%; max-width:100%; margin:auto; } } &>figcaption{ padding: 0.5rem 0; .fig-tit{ font-size: 0.7rem; margin-bottom: 0.5rem; overflow: hidden; } .fig-info{ font-size: 0.6rem; margin-bottom: 0.3rem; overflow: hidden; } } } .fig-one{ position: relative; &>figcaption{ position: absolute; bottom: 0; left:0; right:0; background-color: rgba(1,1,1,0.5); line-height: 1.2rem; font-size: 0.6rem; white-space: nowrap; -ms-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; color: #fff; padding:0.2rem; } } .fig-normal{ padding: 0.5rem; .fig-img{ display: block; margin:0 auto; } figcaption{ padding:0.5rem 0; .fig-tit{ font-size: 0.7rem; margin-bottom: 0.5rem; overflow: hidden; } } } .fig-inline,.fig-inline-v2{ //padding:0.75rem; .fig-img-wrapper{ position: relative; width: 40%; display: inline-block; float: left; border:1px solid $border-dd; .paddingT{ padding-top: 100%; } img{ position: absolute; top:0; bottom:0; left:0; right:0; display: block; max-height:100%; max-width:100%; margin:auto; } } figcaption{ width: 60%; display: inline-block; float: left; padding: 0.5rem; .fig-tit{ font-size:0.9rem; margin-bottom: 0.5rem; } .fig-info{ font-size: 0.6rem; margin-bottom: 0.3rem; } } } .fig-inline-v2{ figcaption{ width:auto; .fig-tit{ font-size: 0.9rem; margin-bottom:0.5rem; } .fig-info{ font-size: 0.6rem; margin-bottom: 0.3rem; } } }