이미지 화질 유지하면서 상단 하단 자르고 가운데로 정렬하기

HTML

  <div style="height:160px">  
    <div style="max-height: 80px;overflow: hidden;">
        <img src="이미지 경로" style="max-height: initial;margin-top: -20%;">
    </div>
  </div> 
   

 

 

소스 설명

1. <div> <img> </div>  html 생성

2. <div>에 max-height: 80px;overflow: hidden; 속성 부여

3. <img>에 max-height: initial;margin-top: -20%; 부여

4.  max-height와 margin-top 값 수정하면서 조절

 

 

결과 화면