이미지확대를하니 한쪽으로 쏠려서 확대가됩니다.
본문
이미지확대를하니 한쪽으로 쏠려서 확대가됩니다.
.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>
감사합니다 제가 작업중인건 슬라이드 이미지인데 소스적용하니 슬라이드시 이상하게 보입니다...
알려주신 소스는다른곳에 유용하게 사용하겠습니다.
답변을 작성하시기 전에 로그인 해주세요.