Image 다루기

김예찬·2021년 5월 22일
0
post-thumbnail

html에서 이미지를 다뤄보자😆

Image 없는 웹도 있나?..

최근 웹사이트 토이 프로젝트를 하며 가장 많이 하는 일이 서버로 부터 데이터를 받아와 화면에 뿌려주는 일이다. 글자의 형태의 정보들은 font의 사이즈만 조절해주거나 잡아주는 틀의 모양대로 데이터가 알아서 잘 들어가기 때문에 별 걱정이 없다(아마 현업에 들어가면 다를테지..) 하지만 이미지를 받을 때면 항상 생각 되는게 모든 이미지의 크기도 다르고 해상도도 다르기 때문에 전부 같은 경우로 데이터를 화면에 넣게 되면 어떤 이미지는 깨져 보이고, 어떤 이미지는 너무 커서 반쪽 밖에 안나오게 되는 것이였다!!
이러한 현상에 스트레스를 받던 중 아주 좋은 css 프로퍼티를 찾게 되었다.

object-fit

바로 object-fit인데, 이번 블로그를 통해 정리해보려고 한다.

정의

요소의 크기에 맞게 <img>태그와 <video> 태그의 크기를 조정하는 방법으로 사용되는 속성

속성값

설명
fill기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 늘어나거나 찌그러집니다.
contain요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다.
cover요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다.
none크기가 조정되지 않고 원본사이즈로 처리됩니다. 크면 잘리고, 작으면 남습니다.
scale-down크기를 아무것도 지정되지 않거나 혹은 contain이 지정되어 있는 것처럼 변경됩니다. 이는 원본 크기보다 작아지는 결과를 보여준다.

예제

🎨예제 소스

예제 html

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            padding: 10px;
            border: 2px solid black;
        }
        .img01 {
            width: 150px;
            height: 150px;
            object-fit: fill;
        }
        .img02 {
            width: 150px;
            height: 150px;
            object-fit: contain;
        }
         img03 {
            width: 150px;
            height: 150px;
            object-fit: cover;
        }
        .img04 {
            width: 150px;
            height: 150px;
            object-fit: none;
        }
        .img05 {
            width: 150px;
            height: 150px;
            object-fit: scale-down;
        }
    </style>
</head>
<body>
    <h3>fill</h3>
    <div>
        <img src="test.jpg" alt="" class="img01">
    </div>
    <hr>
    <h3>contain</h3>
    <div>
        <img src="test.jpg" alt="" class="img02">
    </div>
    <hr>
    <h3>cover</h3>
    <div>
        <img src="test.jpg" alt="" class="img03">
    </div>
    <hr>
    <h3>none</h3>
    <div>
        <img src="test.jpg" alt="" class="img04">
    </div>
    <hr>
    <h3>scale-down</h3>
    <div>
        <img src="test.jpg" alt="" class="img05">
    </div>
    <hr>
</body>
``` ![fill](https://velog.velcdn.com/images%2Fwabbang%2Fpost%2Ff9352767-dd77-462b-bf3b-bb861882ed87%2Ffill.PNG)

Object-position

object-fit은 위에서 보여지듯 이미지가 잘려서 보여질 수 있다. 이때 보여질 이미지를 기준으로 어디를 보여줄지 위치를 이동하는 속성이다.

  • x축 키워드: left, center, right
  • y축 키워드: top, center, bottom

🤣position의 예제는 mdn에서 확인 하시길 바랍니다.

CSS는 어려워

이번 블로그를 쓰며 css는 어떻게 공부해야 되는지 고민이 생긴다. 누군가는 필요할 때만 찾아 쓰면 된다고 하지만, 어느정도 수준까지는 알고 있는게 프론트엔드의 기본 소양이라는 생각도 들고.. 유저들에게 가장 가까운 인터페이스에서 중요한 요소인 CSS를 좀 더 잘하고 싶다. 화이팅!

profile
프론트엔드

0개의 댓글