設置圖片固定寬高,按比例縮放
<style>
.setimage {
overflow: hidden;
position: relative;
width: 400px; //圖片固定寬度
height: 300px; //圖片固定高度度
background: black;
}
.setimage > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*top: 50%;left: 50%;, 是以左上角爲原點,故不處於中心位置
translate(-50%,-50%) 作用是,往上(x軸), 左(y軸)移動自身長寬的 50%,以使其居於中心位置
*/
</style>
<div class="setimage">
<a href="#" class="image featured"><img [email protected] alt="" /></a>
</div>