반응형 이미지 비율 유지

NOTION 정리/CSS

반응형 이미지 비율 유지

dev_sr 2023. 11. 2. 22:53

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        main {
            position: relative;
            width: 100%;
            height: 0;
            overflow: hidden;
            padding-top: 56.25%; //16:9
        }
        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
    </style>
    <title>Document</title>
</head>
<body>
    <main>
        <img src="./cat.jpg" alt="cat">
    </main>
</body>
</html>

padding-top 50% - 2:1

padding-top 200% - 1:2

padding-top 75% - 4:3

360 width

이미지 종횡비 16:9

720 width

이미지 종횡비 16:9

참고

https://happyer16.tistory.com/entry/%EA%B0%80%EB%A1%9C%EC%84%B8%EB%A1%9C-%EB%B9%84%EC%9C%A8-%EC%9C%A0%EC%A7%80%ED%95%98%EB%8A%94-%EB%B0%98%EC%9D%91%ED%98%95-%EB%B0%95%EC%8A%A4

가로세로 비율 유지하는 반응형 박스

반응형 웹디자인에서는 .wrap { max-width: 100%; width: 100%; } 를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법을 많이 사용한다. 이 때 높이는 컨텐츠를 가지고 있는 높이

happyer16.tistory.com

https://hasudoki.tistory.com/entry/CSS-%EB%B0%98%EC%9D%91%ED%98%95-169-%EB%B9%84%EC%9C%A8-%EC%9C%A0%EC%A7%80%ED%95%98%EB%8A%94-%EB%B2%95

CSS - 반응형 16:9 비율 유지하는 법

CSS - 반응형 16:9 비율 유지 개요 이 https://css-tricks.com/aspect-ratio-boxes/ 페이지를 보고 번역/의역을 했습니다. 자세한 내용은 위 링크를 참고해주세요. 유투브 동영상 또는 반응형 작업시에 필요한

hasudoki.tistory.com

'NOTION 정리 > CSS' 카테고리의 다른 글

반응형 웹과 적응형 웹 (0)	2023.11.12
IE에서 overflow:hidden 이 적용되지 않는 경우 (0)	2023.11.02

현재글반응형 이미지 비율 유지

티스토리툴바