위토즈 - 개발자프로그램판매공간

정보공유

[퍼블리싱] 이미지 중앙 가운데 정렬

작성자
위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물
작성일
18-12-20 16:25
조회수
30,776 건
댓글
0 건

http://webdir.tistory.com/4878563회 연결

목록

 

<style>

.thumbnail-wrappper { width: 25%; }

.thumbnail { position: relative; padding-top: 100%; /* 1:1 ratio */ overflow: hidden; } 

.thumbnail .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); } 

.thumbnail .centered img { position: absolute; top: 0; left: 0; max-width: 100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

</style>

 

<div class="thumbnail-wrapper"> <div class="thumbnail"> <div class="centered"> <img src="xxxx"> </div> </div> </div>

 

 

 

 

출처: http://webdir.tistory.com/487

목록
정보공유
Total 45건 1 페이지
번호 제목 글쓴이 날짜 조회
45 CSS를 사용하여 4x4 형태의 갤러리 디자인 그리드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-05 415
44 html 로 된 svg 태그를 png 파일로 만들기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-08 971
43 css 가로폭 일정비율로 칸 만들기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-18 2601
42 부트스트랩 모달창 제어 관련 스크립트. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-29 3013
41 [2021 최신 CSS 6] position:sticky 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7434
40 [2021 최신 CSS 5] aspect-ratio 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7288
39 [2021 최신 CSS 4] Flex Box Gap 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7217
38 [2021 최신 CSS 3] 브라우저 지원여부 확인 @supports 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 6949
37 [2021 최신 CSS 2] 1줄로 정리 :is 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7211
36 [2021 최신 CSS 1] 앱처럼 스크롤을 적용하자 scroll-snap 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7534
35 웹페이지 인쇄할때 하단에 주소 안나오도록 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-22 7942
34 웹페이지 인쇄할때 페이지 구분하는 style 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-20 8247
33 페이지가 이유도 없이 중간에 리로딩 되는 문제 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-05 14860
32 전체화면 배경이미지 깔기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-07 14726
31 깜빡이는 버튼 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-05 21435