이미지가 창크기에 맞춰 확대축소되는거!! 도와주세요!! --;;
글길
급해용!! 저 좀 도와주세용!!
제가 구현하고 싶은건... 아래의 네이버 이미지검색 창처럼 첫화면에서 스크롤이 생성되지않고...큰 이미지의 높이너비가 비율대로 줄어들어 화면 전체가 표현되는 겁니다. 그후 창 사이즈에 맞춰 이미지가 축소확대되는겁니다. 요는 이거 css만으로 짤수있는겁니까??
네이버 이미지검색 창
http://imagesearch.naver.com/search.naver?sm=ext&viewloc=1&where=idetail&rev=13&query=%eb%af%b8%ec%88%a0%ea%b4%80§ion=image&sort=0&res_fr=0&res_to=0&start=1&ie=utf8&img_id=dic184437%7c186371_1&face=0&color=0&ccl=0&viewtype=0&aq=0&spq=0&nx_search_query=%eb%af%b8%ec%88%a0%ea%b4%80&nx_and_query=&nx_sub_query=&nx_search_hlquery=&nx_search_fasquery=
그래서 제가 하드코딩하는 사람들 사이트에서 참고하여 아래에서 테스트 중인데...
이미지가 줄지않습니다. 어찌어찌해서 스크롤이 생성되지않더니 또 푸터가 화면에 나타나지 않고... 어설픈 코딩실력 하려니 죽을맛입니다. 제게 팁좀주세용!!
제가 지금 테스트하고 있는 소스
!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml
style type=text/css
html{height:100%;}
body { height: 100%; margin: 0; padding: 0; }
#head { height: 50px; background: #ccc; z-index: 1; }
#body { position:relative; height: 100%; width:100%; text-align:center; overflow:hidden; }
* html #body { height: 100%; }
#content-area { display:block; height:auto; width:auto; overflow:hidden; margin:10px auto; border:1px solid #ff6633; position:relative; z-index: 100; }
#foot { height: 50px; background: #ff6633; z-index: 2; }
/style
/head
body
div id=head
요건 100px 높이 헤드
/div
div id=body
div id=content-area
img src=sdc11212.jpg style=height:auto; width: auto;
/div
/div
div id=foot
요건 50px 높이 풋
/div
/body
/html
-
앨프레드 2023-07-19
jquery 리사이즈 로 하는 방법도 있습니다.
-
안다미로 2023-07-19
%로 주세요~
번호 | 제 목 | 글쓴이 | 날짜 |
---|---|---|---|
2669917 | if문 3단법이라고 하던가요? 이거 잘못되었나요? | 딸기우유 | 2024-09-28 |
2669835 | 정말정말 급합니다.... | 풀큰 | 2024-09-27 |
2669786 | 문자가 하나밖에 안나올까요 .... | 먹딸기 | 2024-09-27 |
2669738 | 자바초보 질문드려요 (__) pack()에 대해.. | 꽃짱구 | 2024-09-26 |
2669718 | 실무면접은 어떻게 보는지.. 실무자들이 중점적으로 보는건 어떤건지 궁금해요^^ (2) | 큐티베이비 | 2024-09-26 |
2669688 | 혹시 이거 해결할수 있으신 분 계신가요?? (1) | 그대와나 | 2024-09-26 |
2669656 | 비주얼 스튜디오 6.0 설치 문제 !!.. ^^ (1) | 핫체리 | 2024-09-25 |
2669602 | *this (3) | 돌삥 | 2024-09-25 |
2669548 | 한국형 주소검색이 되나요? (1) | 이거이름임 | 2024-09-25 |
2669524 | 썸네일 질문! (3) | agine | 2024-09-24 |
2669446 | 테마 설치중 처음보는 오류입니다 ㅠ | 라 | 2024-09-24 |
2669391 | 비트맵 이미지 변형시킬 때 깨지는 현상 (5) | 한샘가온 | 2024-09-23 |
2669334 | jquery 스터디 인원 모집.[모집완료] (10) | 화이트캣 | 2024-09-23 |
2669258 | 워드프레스에 프레지를 올리려면 어떻게 해야하나요? | 아라 | 2024-09-22 |
2669182 | [질문]파티클관련해서 소스좀 구할수없을까여? (4) | 나슬 | 2024-09-21 |
2669129 | meta 태그질문요 ㅠㅠ (4) | 엄지 | 2024-09-21 |
2669072 | 이 사이트에 쓰인 기능들이 궁금합니다. (6) | 댓걸 | 2024-09-20 |
2668996 | 음수값 주기 질문드려요!! (5) | 설화 | 2024-09-20 |
2668944 | 이 사이트의 테마는 뭘까요? | 갅지돋는슬아 | 2024-09-19 |
2668918 | InputStream 을 String형으로 변환 (7) | 은G | 2024-09-19 |