본문으로 바로가기

WEBDIR

현재위치 :: HOME BLOG CATEGORY SEARCH ARCHIVE TAGS MEDIA LOCATION GUESTBOOK

네비게이션

  • 홈으로
  • 블로그소개
  • 카테고리
  • 태그
  • 방명록
관리자
  • 블로그 이미지
    흉내쟁이

    개발자모드 ON, 부스터 디자인

    링크추가
  • 글쓰기
  • 환경설정
  • 로그인
  • 로그아웃

ratio 검색 결과

해당 글 1건

CSS로 유동적인 컨테이너 너비에 기반한 이미지 비율 유지, 가운데 정렬, 자르기

이미지 요소나 비디오 요소를 특정 비율에 맞춰 확장 또는 축소되길 원할때 사용되는 기법에 대한 설명입니다. 스크립트의 사용없이 오직 CSS만을 이용하여 이를 구현해보며 원리의 이해를 돕습니다. 이미지 비율 유지 이미지의 비율을 유지하면서 크기 조정을 하는 방법은 이미지의 너비와 높이 둘 중 어느 하나를 auto 값을 유지한 채로 크기 조정을 하는 것이다. 흔히 반응형 이미지에 사용되는 방법은 아래와 같다. img { max-width: 100%; height: auto; } 반응형 이미지의 너비를 자유롭게 조정하기 위해서 이를 감싸는 컨테이너를 추가 해주고 적절한 너비를 부여하면 아래와 같다. .thumbnail-wrappper { width: 25%; } img { max-width: 100%; hei..

웹코딩/CSS 2015. 11. 26. 03:33
  • 이전
  • 1
  • 다음

사이드바

ABOUT

WEBDIR for Developer

NOTICE

  • 스킨 변경 및 배포
  • 리부트!! WEBDIR 개편 소식
  • 오픈!! WEBDIR 블로그 소개
  • 전체 보기
MORE+

CATEGORY

  • 전체보기 (438)
    • 윈도우즈 (68)
      • Windows 일반 (49)
      • Windows 10 (11)
      • WSL (8)
    • 리눅스 (135)
      • Linux 일반 (63)
      • CentOS (26)
      • Ubuntu (46)
    • 네트워크 (8)
    • 웹코딩 (125)
      • HTML (43)
      • CSS (41)
      • Javascript (14)
      • PHP (5)
      • MySQL (0)
      • App,Plugin (22)
    • 웹개발론 (31)
      • 웹표준, 접근성 (6)
      • 크로스브라우징 (24)
      • 반응형웹디자인 (1)
    • 프레임워크 (6)
      • 보일러플레이트 (6)
      • 부트스트랩 (0)
    • 그누보드 (4)
      • GNU 자습서 (2)
      • GNU 팁 (2)
    • 워드프레스 (13)
      • WP 팁&테크 (9)
      • WP 플러그인 (3)
      • WP 변경이력 (1)
    • 티스토리 (10)
      • 블로그가이드 (0)
      • 스킨가이드 (8)
      • 스킨배포 (2)
    • 개발도구 (33)
      • XAMPP (6)
      • 서브라임텍스트 (15)
      • 에디터 (2)
      • 크롬, 개발자도구 (6)
      • Git (1)
      • Hyper-V (0)
      • Docker (0)
      • 가상머신 (1)
    • 기존 작성물 (5)

RECENTLY

  • 최근 글
  • 최근 댓글

최근 글

최근댓글

TAG

  • polyfill
  • Plugin
  • html5
  • app
  • Editor
  • Utility
  • HTML
  • ubuntu
  • Command
  • jQuery
  • Wordpress
  • sublimetext
  • JavaScript
  • server
  • CentOS
  • property
  • element
  • Windows
  • CSS
  • Linux
MORE+

LINK

  • 그렇고 그런 이야기
  • Life is an egg.
  • Codrops
  • Front-end Developer Ishaiin.

VISITOR

현재 실시간 방문자
오늘
어제
전체
  • 홈으로
  • 방명록
  • 로그인
  • 로그아웃
  • 맨위로
SKIN BY COPYCATZ COPYRIGHT WEBDIR, ALL RIGHT RESERVED.
WEBDIR
블로그 이미지 흉내쟁이 님의 블로그
MENU
  • 홈으로
  • 블로그소개
  • 카테고리
  • 태그
  • 방명록
CATEGORY
  • 전체보기 (438)
    • 윈도우즈 (68)
      • Windows 일반 (49)
      • Windows 10 (11)
      • WSL (8)
    • 리눅스 (135)
      • Linux 일반 (63)
      • CentOS (26)
      • Ubuntu (46)
    • 네트워크 (8)
    • 웹코딩 (125)
      • HTML (43)
      • CSS (41)
      • Javascript (14)
      • PHP (5)
      • MySQL (0)
      • App,Plugin (22)
    • 웹개발론 (31)
      • 웹표준, 접근성 (6)
      • 크로스브라우징 (24)
      • 반응형웹디자인 (1)
    • 프레임워크 (6)
      • 보일러플레이트 (6)
      • 부트스트랩 (0)
    • 그누보드 (4)
      • GNU 자습서 (2)
      • GNU 팁 (2)
    • 워드프레스 (13)
      • WP 팁&테크 (9)
      • WP 플러그인 (3)
      • WP 변경이력 (1)
    • 티스토리 (10)
      • 블로그가이드 (0)
      • 스킨가이드 (8)
      • 스킨배포 (2)
    • 개발도구 (33)
      • XAMPP (6)
      • 서브라임텍스트 (15)
      • 에디터 (2)
      • 크롬, 개발자도구 (6)
      • Git (1)
      • Hyper-V (0)
      • Docker (0)
      • 가상머신 (1)
    • 기존 작성물 (5)
VISITOR 오늘 / 전체
  • 글쓰기
  • 환경설정
  • 로그인
  • 로그아웃
  • 취소

검색

티스토리툴바