이미지 가운데 정렬

2020.11.07 16:03

Admin Views:6

가로, 세로 크기에 따라서 이미지를 레이어의 가운데 정렬하는 방법이다.

<style type="text/css">
#profile-photoWrap {width:330px;height:427px;overflow:hidden;}
.profile-photoWide {position:relative;align-content:center;margin:17px auto;padding:0;width:330px;height:427px;overflow:hidden;-webkit-print-color-adjust:exact;}
.profile-photoWide img {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);width:auto;height:100%;margin:auto auto;text-align:center;}
.profile-photo {align-content:center;margin:17px auto;padding:0;width:100%;height:100%;overflow:hidden;text-align:center;-webkit-print-color-adjust:exact;}
.profile-photo img {width:330px;height:auto;margin:0;}
</style>
 
<div id="profile-photoWrap">
@php
$size = getimagesize(HttpHandler::getRealPath($CHILD->source));
$photoClass = ($size[0]>$size[1]) ? 'profile-photoWide' : 'profile-photo';
@endphp
  <div class="{{ $photoClass }}">
    <img src="{{ $CHILD->source }}" />
  </div>
</div>