TIL 지정 영역에 이미지 넣기

2023.03.15 수

css

     .img_box{

         /* background-color: green; */

         position: relative;

         overflow: hidden;

         width: 200px;

         height: 200px;

         margin-left: 50px;

     }

     .img_box>img{

        position:absolute;

        width: 100%;

        height: 100%;

        object-fit: cover;

    }

html

    <div class="img_box">

            <img id="s_url" src="url~~">

    </div>

   

1.div로 묶고 class만들기

position:relative; 을 사용하여 기준을 만들고

width와 height를 이용하여 영역의 크기를 설정

2.css 선택자를 이용하여 나의 영역에 있는 요소를 선택해줍니다

.img_box > img

3.position:absolute;를 사용하여 나와 관계된 img_box에서 만든 기준으로 이미지를 배치합니다

width 200px, height 200px을 기준으로 

100%, 100% 전부 사용하여 이미지를 위치시킵니다 

3.object-fit을 이용하여 지정된 영역에 들어갈 이미지가 어떻게 들어갈 것인지 결정합니다

cover는 요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다.

일정 비율로 지정된 위치가 가득 찰 때까지 확대시키는 것입니다.

 

오늘 느낀 점:

서러움은 무지를 인지 할 때 부터 찾아온다 인지의 순간 무지를 유지하는 것은 부끄러움이다