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

</p>

<p><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="<a href="https://www.w3schools.com/howto/img_paris.jpg"" target="_blank" rel="noopener noreferrer">https://www.w3schools.com/howto/img_paris.jpg"</a> alt=""></div>

<div class="img img2"><img src="<a href="https://www.w3schools.com/howto/img_paris.jpg"" target="_blank" rel="noopener noreferrer">https://www.w3schools.com/howto/img_paris.jpg"</a> alt=""></div>

<div class="img img3"><img src="<a href="https://www.w3schools.com/howto/img_paris.jpg"" target="_blank" rel="noopener noreferrer">https://www.w3schools.com/howto/img_paris.jpg"</a> alt=""></div>

<div class="img img4"><img src="<a href="https://www.w3schools.com/howto/img_paris.jpg"" target="_blank" rel="noopener noreferrer">https://www.w3schools.com/howto/img_paris.jpg"</a> alt=""></div></p>

<p>