2020년 10월 7일 수요일

CSS로 사진 상하좌우 센터 위치시키기

사진센터정렬


CSS

/*사진센터정렬*/
.img-preview{
    background-image:url("../img/image_o.png");
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    text-align: center;
    width: 100%;
    height: 94px;
    position: relative;
}
.img-preview img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    vertical-align: middle;
    border: 0;
}

HTML

...
<tr>
    <td class="tbW30 pD8 photo" rowspan="3">
        <a href="editPhoto.do"><div class="img-preview"><img src="../img/obj-out-01.jpg" alt=""></div></a>
    </td>
</tr>
...