프로젝트 도중 표시하는 섬네일 이미지 크기를 조정할 일이 생겼습니다.
옛날 처럼 이걸 자바스크립트로 계산해서 다 조정해줘야 하나- 하고 웹을 뒤젹거리고 있다가 눈에 띄는 제목을 발견!
!!
CSS로 적용하면 페이지 마다 일일이 안바꾸고도 가능할것 같아서 보니까 정말 간단한 방법이 있었습니다.
이미지에 css로 width나 height를 고정값으로 주고 나머지를 auto로 주는것!
바로 적용해봤는데.. 이미지중에 혼자 좀 크기가 튀는 녀석이 있어서 테이블 셀 크기가 늘어나는 문제가(....)
css에 max-height 를 추가하니까 바로 해결되었습니다.
참고한 글의 댓글들을 보니 max-width, max-height 만 지정해줘도 되는군요.
옛날에 저걸 스크립트로 수정하고 있었던걸 생각하면 무슨짓이었나 싶습니다(....)
참고 : blog.sachinkraj.com/how-to-resize-images-with-css/
옛날 처럼 이걸 자바스크립트로 계산해서 다 조정해줘야 하나- 하고 웹을 뒤젹거리고 있다가 눈에 띄는 제목을 발견!
How To Resize Images With CSS – Keeping Aspect Ratio As It Is: Quick & Easy
!!
CSS로 적용하면 페이지 마다 일일이 안바꾸고도 가능할것 같아서 보니까 정말 간단한 방법이 있었습니다.
이미지에 css로 width나 height를 고정값으로 주고 나머지를 auto로 주는것!
바로 적용해봤는데.. 이미지중에 혼자 좀 크기가 튀는 녀석이 있어서 테이블 셀 크기가 늘어나는 문제가(....)
css에 max-height 를 추가하니까 바로 해결되었습니다.
#mediaImage1
{
width: 96px;
height: auto;
max-height: 77px;
}
참고한 글의 댓글들을 보니 max-width, max-height 만 지정해줘도 되는군요.
옛날에 저걸 스크립트로 수정하고 있었던걸 생각하면 무슨짓이었나 싶습니다(....)
참고 : blog.sachinkraj.com/how-to-resize-images-with-css/
