미누에요

[HTML/CSS] 이미지 사이즈 조정, 이미지 크기 설정, position:absolute 본문

Web

[HTML/CSS] 이미지 사이즈 조정, 이미지 크기 설정, position:absolute

미누라니까요 2023. 11. 29. 11:47
728x90
반응형
SMALL

 position : absolute

첫번째 방법은 이미지를 컨테이너로 감싸고, 컨테이너에서 넘치는 부분은 잘라내는 방식이다.

div 태그로 감싼 img 요소의 style에 position : absoulte를 추가한다.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        .container{
            width: 100px;
            height: 100px;
            overflow: hidden;
            position: relative;
        }
        .container > img{ 
            position: absolute;
            width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="/Users/minwoo/Desktop/minwoo/code/Web/NaverWebClone/shortcuticonimg/news.png">
    </div>
</body>

 

<body> 요소를 보자.

내부의 img 태그에서 우리가 불러올 이미지를 불러오는 것을 알 수 있다.

그리고 그 img 요소를 div 태그로 감싼다.

 

<style> 요소에서 div 태그인 container class에 속성들을 부여한다.

각 속성별 의미는 아래와 같다.

 

<div class="container"> CSS 속성

  • width : 100px - 컨테이너의 너비를 100px로 설정한다.
  • height : 100px - 컨테이너의 높이를 100px로 설정한다.
  • overflow : hidden - 컨테이너 밖으로 튀어나오는 이미지를 가린다. (안보이게 한다.)
  • position : relative -position 속성을 relative로 설정하면, 요소를 원래 위치에서 벗어나게 배치할 수 있다. 요소를 원래 위치에 대해 상대적으로 배치한다고 생각하면 될 거 같다. 여기서는 <img> 태그의 기준점이 contaioner가 되도록 세팅하는 것이다.

 

<img> CSS 속성

  • position : absolute - 요소의 위치를 상위 요소인 container에 맞춘다. container에 대해 절대적인 위치를 갖는다.
  • width : 100% - 삽입된 이미지의 가로세로비를 유지한 채, 가로폭을 기준으로 세로 길이가 잘리도록 한다. 가로 길이는 상위요소인 <div class="container">를 따른다.
  • top : 50% , left : 50%, transform(-50%, -50%) - <img>태그를 <div class="container"> 요소에서 중앙에 위치시킨다.

 

728x90
반응형
LIST
저작자표시

'Web' 카테고리의 다른 글

CSS 기본 속성  (2) 2023.12.02
[HTML/CSS] 이미지 사이즈 조정, 이미지 크기 설정, object-fit  (2) 2023.11.29
[HTML/CSS] 글자 가운데 정렬하기  (0) 2023.11.25
[HTML/CSS] Class, Id의 차이점  (2) 2023.11.24
[HTML/CSS] div 요소 가로정렬, float  (4) 2023.11.23
'Web' Related Articles more