[JS] : 이미지의 사이즈 균일문제

[Seunghun Kang]

요청 사항

• 리스트의 높이가 최대한 비슷하면서, 안의 이미지도 보일 수 있을 정도가 되도록 요청받음.
• 이미지의 가로, 세로 및 여백의 유무가 제각각임.

문제점

• 서버로 부터 받은 리스트를 동적으로 그려줄 때, 이미지의 가로, 세로가 재각각임.
• 기존 스타일을 조금 수정해서 작업을 하는 것을 목표로 함.

• 이미지 높이값을 고정으로 두게 될 때, 해당 문제처럼 가로가 짧고 높이가 긴 경우 너무 작게 나오는 경우가 발생하게 됨.

[Seunghun Kang]

• 이미지 자체의 위아래 여백은 무시하기로 함.
• 최대한 많은 리스트가 보여지길 요청함. (최소 높이 48px);

[Seunghun Kang]

• HTML
  

• JS
  

• Image를 받아올 때, 길이를 확인하고, 일정 길이 이상일 경우 값을 고정시켜서, 최대한 비슷한 리스트 아이템을 만들려고 함.

[Seunghun Kang]

• 문제점 : 두 줄이 넘어가는 이미지들은 찌그러지는 경향이 있음......

[Seunghun Kang]

• 코드 수정
  • 조건을 주어서 높이값을 조절함.

[Seunghun Kang]

• 조건 세분화 및 코드 정리

[Seunghun Kang]

• 가로 기준으로 일정 크기만큼 줄인뒤, max-width: 100%로 조정하기로 함

onLoad 할 때, 이미지의 width를 보고 반으로 줄인뒤 max-width: 100% 적용함.

• css에 max-width: 100%를 적용시키면, onLoad때 정확한 값을 얻지 못함.

---

• 결과