CSS圖片Img等比例縮放且居中顯示

時間 2020-12-25

標籤 web spa 3d code orm blog 圖片 form 欄目 CSS 简体版

原文原文鏈接

經常使用來作圖片放大顯示的遮罩層imgScaleweb

HTMLspa

<div id="imgScale" >
      <img src="">
</div>

CSS3d

.imgScale{ width: 670px; height: 320px; display: block; position: relative;
} .imgScale img{ max-width: 100%; max-height: 100%; width:auto; height:auto; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); -webkit-transform: translate3d(-50%,-50%,0);
}