HTML 태그로 img를 불러와서 화면에 표시하려 하는데요,

 

가로 길이가 700px  세로길이가 500px 인 div 안에 img를 넣을때,

 

1. img의 가로길이가 900px 세로길이가 400px이면 가로길이가 200px을 넘어간 만큼 일정한 비율로 이미지를 축소하여 div의 중앙에 표시하고,

 

2. img의 가로길이가 500px 세로길이가 700px이면 세로길이가 300px을 넘어간 만큼 일정한 비율로 이미지를 축소하여 div의 중앙에 표시하고

 

3. img의 가로길이가 400px 세로길이가 400px로 div보다 작을경우엔, 작은 것 그대로 div의 중앙에 표시합니다.

 

이렇게 표시하는걸 HTML, CSS, JS 등을 이용해 구현하는 방법을 문의드립니다.