반응형웹, CSS만으로 background-image 의 종횡비 유지하기
RWDB Responsive Web Design dB Web awards, 우수 하이브리드웹·반응형웹 모음 사이트
rwdb.kr
width:1000px; height:300px; 을 기준으로 하며, 종횡비를 유지해야하는 컨텐츠
.background {
width : 100 %;
height : 0;
padding-top : calc (300 / 1000 * 100 %); / * calc (이미지 높이 ÷ 이미지 가로 × 100 %) * /
background : url (bg.jpg) center center / cover no-repeat;
}padding-top 또는 padding-bottom 의 값은 “이미지 높이 ÷ 이미지 가로 × 100″
반응형
'UXUI Development > CSS' 카테고리의 다른 글
| [CSS3] 3D Transform - Perspective (투영점) (0) | 2022.04.06 |
|---|---|
| [CSS] background-image 이미지 흐리게 나올경우 선명하게 하기 (0) | 2022.03.29 |
| [CSS3] 방어적(Defensive) CSS (0) | 2021.12.10 |
| [CSS] border effect css (0) | 2020.07.22 |
| [CSS] PNG, SVG 파일 CSS로 색상 변경하기 (0) | 2019.01.14 |
| [CSS] 페이지의 하단에 footer 고정 시키기 (0) | 2019.01.10 |
| [CSS] CSS Units 반응형 (em, rem, vw, vh, %) (0) | 2018.10.05 |
| [CSS3] Flexbox (display:flex, justify-conent, align-items, flex-grow, flex-basis) (0) | 2018.07.16 |