﻿/*================Các thông số mặc định để ở phần khung ảnh================*/
.khungAnh{position:relative;z-index:1}
.khungAnh:before{content:"";display:block;padding-bottom:66%}
.khungAnhCrop,
.khungAnhCrop0{overflow:hidden;text-align:center;display:inline-block;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%}


/*================Trường hợp ảnh lọt trong khung================*/
.khungAnhCrop0 img{max-width:100%;max-height:100%;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%)}
.khungAnhCrop0 img{
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}
/*transform phải viết thêm cho các trình duyệt cũ*/

/*================Trường hợp ảnh tràn lề khi chưa gắn class xác định ảnh dạng ngang hay dọc================*/
.khungAnhCrop img{max-width:150%;max-height:150%;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%)}
.khungAnhCrop img{
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}

/*Ảnh ngang (width > height) --> gắn height 100%, width sẽ bị lấp hai bên*/
.khungAnhCrop img.wide{height:100%;max-width:none}

/*Ảnh dọc (width < height) --> gắn width 100%, height sẽ bị lấp phần trên dưới*/
.khungAnhCrop img.tall{width:100%;max-height:none}


/*================Hiệu ứng zoom ảnh khi hover================*/
.khungAnhCrop img,
.khungAnhCrop0 img{-moz-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;-webkit-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s}

.khungAnhCrop:hover img{transform:translate(-50%,-50%)}
.khungAnhCrop:hover img{
    -webkit-transform:translate(-50%,-50%) ;
    -moz-transform:translate(-50%,-50%) ;
    -o-transform:translate(-50%,-50%) ;
    transform:translate(-50%,-50%) 
}

.khungAnhCrop0:hover img{transform:translate(-50%,-50%)}
.khungAnhCrop0:hover img{
    -webkit-transform:translate(-50%,-50%) ;
    -moz-transform:translate(-50%,-50%) ;
    -o-transform:translate(-50%,-50%) ;
    transform:translate(-50%,-50%) 
}
/*----*/
