視覺給的圖片可能是200*200赂蕴,但實際頁面展示需要100*100柳弄。通過傳入?yún)?shù):100px,來達(dá)到自己想要的效果睡腿。
@mixin hv-align-auto ($maxwidth) {
width: 100%;
max-width: #{$maxwidth};
margin: 0 auto;
.hv-align-inner {
display: block;
width: 100%;
padding-top: 100%;
position: relative;
img {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
}