图片
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
响应式图片
通过为图片添加 .hui-image-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。
图片形状
注意: IE8以下不支持圆角、圆形效果。
HTML
SCSS
CSS
<img src="..." class="hui-image hui-image-responsive" alt="响应式图片">
<img src="..." alt="..." class="radius"> <img src="..." alt="..." class="round"> <img src="..." alt="..." class="thumbnail">
@mixin transition($v) { transition: $v; } @mixin borderRadius($v) { -ms-border-radius: &v; border-radius: $v; } .hui-image { &.hui-thumbnail { display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 100%; height: auto; padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; @include transition(all .2s ease-in-out); } &.hui-image-responsive { display: inline-block; max-width: 100%; height: auto } } @media (max-width: 767px) { .hui-image { &.hui-image-responsive { width: 100% } } }
.hui-image.hui-thumbnail { display: inline-block; box-sizing: border-box; max-width: 100%; height: auto; padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; transition: all 0.2s ease-in-out; } .hui-image.hui-image-responsive { display: inline-block; max-width: 100%; height: auto; } @media (max-width: 767px) { .hui-image.hui-image-responsive { width: 100%; } }
图集
《仙剑奇侠传》赵灵儿(20张)
HTML
SCSS
CSS
<div class="hui-album" style="width:160px"> <div class="hui-album-img"> <img src="" style="height: 160px;"> </div> <div class="hui-album-title">《仙剑奇侠传》赵灵儿<span class="c-999">(20张)</span></div> <div class="hui-album-bg"> <div class="hui-album-bg-fir"></div> <div class="hui-album-bg-sec"></div> </div> </div>
.hui-album { .hui-album-img { border: 1px solid #e0e0e0; img { display: block; width: 100% } } .hui-album-title { display: block; text-align: left; padding: 7px 5px; line-height: 18px; color: #555; text-decoration: none; font-size: 12px; border: solid 1px #e0e0e0; border-top: 0; } .hui-album-bg { .hui-album-bg-fir, .hui-album-bg-sec { border: 1px solid #e6e6e6; border-top: 1px solid #f5f5f5; height: 1px; margin: 0 auto; overflow: hidden; } .hui-album-bg-fir { margin: 0 3px; } .hui-album-bg-sec { margin: 0 6px; } } }
.hui-album .hui-album-img { border: 1px solid #e0e0e0; } .hui-album .hui-album-img img { display: block; width: 100%; } .hui-album .hui-album-title { display: block; text-align: left; padding: 7px 5px; line-height: 18px; color: #555; text-decoration: none; font-size: 12px; border: solid 1px #e0e0e0; border-top: 0; } .hui-album .hui-album-bg .hui-album-bg-fir, .hui-album .hui-album-bg .hui-album-bg-sec { border: 1px solid #e6e6e6; border-top: 1px solid #f5f5f5; height: 1px; margin: 0 auto; overflow: hidden; } .hui-album .hui-album-bg .hui-album-bg-fir { margin: 0 3px; } .hui-album .hui-album-bg .hui-album-bg-sec { margin: 0 6px; }
头像
HTML
SCSS
CSS
@mixin borderRadius($v) { -ms-border-radius: &v; border-radius: $v; } <img class="hui-avatar size-MINI radius" src="//static.h-ui.net/h-ui/images/ucnter/hui-avatar-default.jpg">
.hui-avatar { display: inline-block; position: relative; overflow: hidden; width: 32px; height: 32px; img { display: block; width: 32px; height: 32px; } &.radius, &.radius img { @include borderRadius(50%); } &.size-MINI { width: 16px; height: 16px; img { width: 16px; height: 16px; } } &.size-S{ width: 24px; height: 24px; img { width: 24px; height: 24px; } } &.size-M{ width: 32px; height: 32px; img { width: 32px; height: 32px; } } &.size-L{ width: 48px; height: 48px; img { width: 48px; height: 48px; } } &.size-XL { width: 64px; height: 64px; img { width: 64px; height: 64px; } } &.size-XXL { width: 100px; height: 100px; img { width: 100px; height: 100px; } } &.size-XXXL { width: 128px; height: 128px; img { width: 128px; height: 128px; } } }
.hui-avatar { display: inline-block; position: relative; overflow: hidden; width: 32px; height: 32px; } .hui-avatar img { display: block; width: 32px; height: 32px; } .hui-avatar.radius, .hui-avatar.radius img { border-radius: 50%; } .hui-avatar.size-MINI { width: 16px; height: 16px; } .hui-avatar.size-MINI img { width: 16px; height: 16px; } .hui-avatar.size-S { width: 24px; height: 24px; } .hui-avatar.size-S img { width: 24px; height: 24px; } .hui-avatar.size-M { width: 32px; height: 32px; } .hui-avatar.size-M img { width: 32px; height: 32px; } .hui-avatar.size-L { width: 48px; height: 48px; } .hui-avatar.size-L img { width: 48px; height: 48px; } .hui-avatar.size-XL { width: 64px; height: 64px; } .hui-avatar.size-XL img { width: 64px; height: 64px; } .hui-avatar.size-XXL { width: 100px; height: 100px; } .hui-avatar.size-XXL img { width: 100px; height: 100px; } .hui-avatar.size-XXXL { width: 128px; height: 128px; } .hui-avatar.size-XXXL img { width: 128px; height: 128px; }