이미지확대를하니 한쪽으로 쏠려서 확대가됩니다.

이미지확대를하니 한쪽으로 쏠려서 확대가됩니다.

QA

이미지확대를하니 한쪽으로 쏠려서 확대가됩니다.

답변 1

본문

이미지확대를하니 한쪽으로 쏠려서 확대가됩니다.

 

2084065438_1614276015.9622.png

    .lt_bn li img{max-width:1000px;width:170%;height:170%;vertical-align:top}

 

이 소스를 사용해서 1번 이미지를 170%확대하면 2번처럼 확대가 됩니다.

원하는건 3번처럼  가운데 기준으로 확대를 원합니다.

 

그래서  ;Horizontal-align:center  를 추가했는데 이게 아닌것같고 어떤 코드를 추가해야할까요??

 

 

이 질문에 댓글 쓰기 :

답변 1

https://codepen.io/4bigchoi23/pen/rNWJOGO

 


<style>
.img { display: block; width: 400px; height: 300px; overflow: hidden; float: left; }
.img1 img { display: block; width: 100%; height: 100%; }
.img2 img { display: block; width: 100%; height: auto; transform: scale(1.7); }
.img3 img { display: block; width: 100%; height: auto; transition: transform 0.25s ease-in-out; }
.img3 img:hover { transform: scale(1.7); }
.img4 img { display: block; width: 170%; height: auto; position: relative; left:50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
</style>
<div class="img img1"><img src="https://www.w3schools.com/howto/img_paris.jpg" alt=""></div>
<div class="img img2"><img src="https://www.w3schools.com/howto/img_paris.jpg" alt=""></div>
<div class="img img3"><img src="https://www.w3schools.com/howto/img_paris.jpg" alt=""></div>
<div class="img img4"><img src="https://www.w3schools.com/howto/img_paris.jpg" alt=""></div>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 16,822
© SIRSOFT
현재 페이지 제일 처음으로