[html&css] div 이미지 뷰 포트 및 div 내부 이미지 중앙 정렬

직장에서 사이트 리뉴얼 중 썸네일에 상품이 더 커 보였으면 한다는 내용이 있었습니다. 등록된 상품이 500개도 넘는데, 상품 등록 시 보통은 썸네일이 종류별로 크기가 다른 네 장을 등록하게 되어 있기 때문에 약 2000장의 jpg들을 포토샵으로 액션을 돌려서 준비해야 합니다. 또 상품 등록을 통해 업로드된 썸네일들은 네 개의 경로가 있고, jpg파일명이 전부 암호화됩니다. 다시 처음으로 돌아가서 우선 파일명이 암호화된 jpg를 네 개의 폴더마다 다 다운로드하고, 그 상태에서 포토샵 액션으로 이미지의 여백을 잘라내던, 상품의 크기를 키우던 해서 2000장을 준비하고, 경로마다 ftp로 덮어씌워주면 되겠지만, 이 복잡하고 시간이 드는 업무를 거치느니, 썸네일 div와 img 속성을 손봐야겠다는 생각이 들었습니다.

 

div안에 이미지를 넣는 몇가지 방식을 테스트해봤습니다. 이것저것 시도해보니 포스팅 제목을 뭘로 해야 할지 고민됐습니다. 제가 작업하며 필요했던 내용도 있고, 기본적으로 사용되는 스타일도 적용해보았습니다.

 

See the Pen qBbBKgP by kindkimyoung (@kindkimyoung) on CodePen.

 

 

1. 이미지 사이즈가 1:1의 비율이라면 div의 width 든 height든 원하는 수치를 동일하게 주고 img width를 100% 주면 되겠지만, 다른 비율(예를 들어 4:3비율)이라면 비율을 유지할 수 있도록 반드시 이미지의 사이즈를 div width에 맞춰 height값을 구한 뒤 명확하게 입력해줘야 합니다.  (포토샵으로 이미지를 열어 div의 width값인 600px을 이미지 size에 넣어 height값을 구했습니다. 참 귀찮네요.)

/*이미지 사이즈 기준 비율을 유지하여 계산한 수치를 직접 수동으로 div에 입력*/ 
.a_div { 
 height: 337px;/*②. 비율을 유지하기 위해 구해온 이미지의 높이 값을 수동으로 입력 .*/ 
 width: 600px;/*기준이 되는 값.*/ 
 border: 5px solid #212121; 
 text-align: center; 
 overflow: hidden;/*div를 넘어가면 감추기*/ 
} 

#img_1 { 
 height: 337px;
 /*①. 가로가 600px인 div안에서 1280*718 사이즈의 이미지가
 비율을 유지하며 꽉차길 바라기 때문에, 1280*718 사이즈의 이미지가 가로 600px이 될경우
 높이는 337px 이므로 div에 이미지 비율에 맞는 높이인 337px을 직접 지정해줍니다.*/ 
 width: auto; 
 text-align: center; 
 position: relative; 
} 

2. 위에서 귀찮게 구해야 했던 이미지의 height값을 구하지 않고, 이미지 스타일 사이즈에 따라 div의 사이즈가 맞춰지도록 div에 display:table-cell;을 줍니다. 그리고 이미지 stlye에 원했던 사이즈인 width: 600px; 이미지의 높이값은 계산하지 않고 자동으로 구해질 수 있도록 height:auto;를 줍니다. 다시 말해 이미지에 맞춰 div의 사이즈가 변하기 때문에, div의 가로 사이즈가 600px 이길 바란다면 div에 display:table-cell;을 주고 이미지 스타일에 width: 600px; height:auto;를 줍니다.

 

/*이미지 사이즈 기준 div가 변형됨*/ 
.b_div{ 
  border: 5px solid #212121; 
  display:table-cell;
  /*div에 사이즈를 주지 않고 table-cell을 줘 div안의 요소(내용)에 맞춰 늘어나도록 지정*/ 
} 

#img_2 { 
width:600px;
/*이미지의 가로가 600px이라면 div도 자동으로 가로 600px이 됨.
이미지의 가로 사이즈를 조절해 보세요*/ 
height:auto;
/*비율이 다른 이미지가 찌그러지면 안될 때,
자동으로 이미지의 높이를 구해올 수 있도록 auto;*/ 
} 

3. 이번에는 div의 사이즈를 고정하여 뷰포트 형식으로 사용하겠습니다. div의 사이즈는 고정되면서 이미지를 div의 중앙을 기점으로 크게 확대의 개념으로 뷰포트 안에 보이도록 하겠습니다. 우선 div에 position: relative;속성을 줍니다. 그리고 width와 height에 원하는 사이즈를 입력합니다. 비율은 자유. overflow: hidden;을 줘서 div의 사이즈를 넘어가는 영역은 보이지 않도록 합니다. 이미지 stlye에 원하는 사이즈 값을 줍니다. position: absolute;로 div 기준 위치 지정을 합니다. 이미지의 우측 상단 기준 top:50%;, left:50%;만큼 이동한 자리에 위치합니다. 이때, div의 중심과 이미지의 중심을 맞춰 이미지가 확대되고 축소되길 바란다면,  transform: translate 속성으로 다시 (-50%, -50%); 각각 X축 -50%, Y축 -50%만큼 이동하도록 합니다. 즉 div의 절반만큼 다시 마이너스 이동하여 결국엔 중앙 정렬이 됩니다.

 

끝으로 중앙 정렬이 된 이미지를 div 뷰포트에서 얼마만큼 크게 보이게 할 것인지 이미지 사이즈를 조절해주시면 되겠습니다.

 

/*뷰포트 형식*/ 
.c_div { 
 position: relative; 
 height: 337px;/*사이즈 고정*/ 
 width: 337px; 
 border: 5px solid #212121; 
 text-align: center; 
 overflow: hidden;/*div를 넘어가면 감추기*/ 
} 

#img_3 { 
height: 100px;/*원하는 결과가 나올 때 까지 이미지의 사이즈를 조절해 보세요*/ 
width: auto; 
position: absolute;/*부모 div기준 절대 위치*/ 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
} 
/*트랜스레이트로 중심 정렬*/

코드펜을 통해 이미지 사이즈를 조절해 보거나 요소들을 빼거나 추가하면서 확인해보시면 훨씬 이해하시기 수월 할 것입니다. 도움이 되셨다면 좋겠습니다.