테터데스크 사용중에 보면 썸네일 크기를 조정하기가 쉽지 않다. 보통은 가로나 세로 기준 하나만 적용해서 이미지 크기를 조정하게 되므로 사진의 위아래나 좌우가 잘리기 마련이다.
이때 사용하면 좋은 CSS 스타일이 바로 max-width와 max-height.
영어단어에서 유추할 수 있듯이, 최대 높이와 최대 너비를 지정해 주는 구문인데, 이를 이용하면 이미지의 최대 크기가 제약되므로, 화면상의 이미지는 내가 지정해둔 공간 안으로 쏙 들어오게 된다.
참고로 아래는 현재 사용중인 CSS중 일부이다...
이때 사용하면 좋은 CSS 스타일이 바로 max-width와 max-height.
영어단어에서 유추할 수 있듯이, 최대 높이와 최대 너비를 지정해 주는 구문인데, 이를 이용하면 이미지의 최대 크기가 제약되므로, 화면상의 이미지는 내가 지정해둔 공간 안으로 쏙 들어오게 된다.
정사각형 안에 쏙 들어온 이미지들
참고로 아래는 현재 사용중인 CSS중 일부이다...
.TD_recent .TD_thumblist .TD_thumbimg .TD_thumbnail img {
max-width:200px; max-height:200px;
}
'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글
| 블로그 스킨 교체 : Moving Box (Green) (2) | 2008/04/24 |
|---|---|
| 개인 블로그 707위 (4) | 2008/04/23 |
| CSS - 가로사진 & 세로사진 구분없이 정사각형 안으로 쏙 들어오는 썸네일 만들기 (4) | 2008/03/26 |
| 갤러리 스킨 - Gallery (Gray) - 적용 (4) | 2008/03/25 |
| 한글과 영어 구분하여 스타일 적용하기 (0) | 2007/10/31 |
| Spotplex : 실시간 블로그 랭킹 서비스 (0) | 2007/10/30 |
트랙백 주소 :: http://www.crazybar.net/trackback/489
-
Subject: max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기
Tracked from Crazy Life on Net 2009/04/01 23:02 삭제블로그 스킨을 변경하다 보면, 글을 올리는 영역의 크기가 천차만별입니다. 이미지 업로드시, 글쓰기 영역의 폭에 그 크기를 맞춘 경우에, 좁은 스킨을 이용하다가 넓은 걸로 바꾸는 경우는 문제가 되지 않지만, 그 반대의 경우는 그림이 잘리는 문제가 발생하게 되죠. 본 블로그도 여러번 스킨을 바꾸면서 이런 문제가 발생을 하더라구요. 이럴때, 유용하게 활용할 수 있는 팁 하나 올립니다. max-width 속성 예전에 max-width에 관한 글을 올린적이..
댓글을 달아 주세요
우오오오!! 정말 감사합니다!
이 소스 덕분에 제 걱정거리가 확 줄어들었어요 ㅠㅠ 정말 감사합니다.
도움이 되셨다니.. 저도 기쁩니다. ^^
해봤는데 제가 잘못한건지 변경이 안되네요. 저는 145x120 섬네일을 사용하고 있는데 가로는 꽉차는데 세로가 여백이 생기더라구요. 저는 그림이 잘려도 상관은 없는데 꽉 채우고 싶거든요. 테터테스크 스타일 시트 수정에서
/* 최신글 앨범형 */
.TD_recent .TD_album {
이 밑에다가 썼거든요. 어떻게 해야하는건지...
해당 이미지 스타일에 지정해보세요.
그리고 가급적 기본 이미지는 정사각형으로 해주시는게 좋아요. 안그러면 경우의 수가 많아 지거든요.
그래고 저 방식은 실제 로딩되는 이미지의 모양만 바꿔줄뿐 로컬에 저장되는 크기는 동일 합니다. 무슨 말인고 하니 저런식으로 썸네일 게시판에 적용을 시키면 데이타가 많아 지거나 잘못된 큰 이미지가 들어오게 되면 엄~~~~청 느려지게 되겠죠~