[HTML/CSS] 이미지 크기와 위치 조절 방법 3가지
이미지 크기 조절 방법 3가지
- < img > 태그 + position: absolute
- < img > 태그 + object-fit
- < div > 태그 + background-image: url();
1. < img > 태그 + position: absolute
이미지를 컨테이너로 한 번 감싼 후, 가운데 정렬한 뒤 컨테이너 크기를 벗어나는 이미지 부분을 자르는 방법.
< img > 요소에 top
과 left
, translate
등의 속성으로 이미지의 위치를 조절할 수 있다.
- < img > 태그를 < div class='container' > 태그로 감싼다.
- < div class='container' > 태그 와 < img > 태그에 CSS 속성을 추가한다.
< div class='container' > CSS 속성
width
와 height
는 렌더링하고 싶은 이미지의 크기를 설정한다.
overflow: hidden;
는 < div class='container' > 태그를 넘어가는 부분의 이미지는 잘라준다.
position: relative;
는 < img > 태그에 position: absoulte를 해줄텐데 절대적인 위치의 기준점이 < div class='container' >이 되도록 설정한다.
< img > CSS 속성
positon: absoulte;
는 position: relative 속성을 가지는 가장 가까운 요소를 기준으로 절대적인 위치를 가지도록 한다.
width: 100%;
는 삽입된 이미지의 가로세로비를 유지한 채, 가로폭을 기준으로 세로 길이가 잘리도록 한다. 이때, 가로 길이는 < div class='container' >에 설정한 width이다.
height: 100%;
는 삽입된 이미지의 가로세로비를 유지한 채, 세로폭을 기준으로 가로 길이가 잘리도록 한다. 이때, 세로 길이는 < div class='container' >에 설정한 height이다.
width: 100%;
와 height: 100%;
를 모두 입력하면 삽입된 이미지의 가로세로비가 망가지더라도 < div class='container' >에 설정한 width와 height 길이만큼 늘어난다.
top: 50%;
, left: 50%;
, transform: translate(-50%, -50%);
는 < img >태그를 < div class='container' > 안에서 가운데 정렬시킨다.
.container {
width: 원하는 px 혹은 rem 혹은 em;
height: 원하는 px 혹은 rem 혹은 em;
overflow: hidden;
position: relative;
}
.container > img {
position: absolute;
width: 100%;
/* height: 100%; */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
장점
- IE(Internet Explorer)에서도 호환된다. (Can I use?)
단점
- < img > 태그를 불필요하게 < div class='container' >와 같은 태그로 한 번 감싸줘야 한다.
- 설정해줘야하는 CSS 속성이 많다.
2. < img > 태그 + object-fit
object-fit
속성을 이용해 이미지의 크기를 조절하는 방법
object-position
속성을 사용해 이미지의 위치를 조절할 수 있다.
object-fit
속성은 < img > 요소나 < video > 요소와 같은 대체 요소의 콘텐츠 크기를 조절하는 속성이다.
object-position
속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있다.
장점
object-fit
속성 하나면 간편하게 이미지 크기를 설정할 수 있다.
단점
- IE(Internet Explorer)에서는 지원하지 않는다. (Can I use?)
3. < div > 태그 + background-image: url();
이미지를 < div > 태그에 background-image
속성을 이용해 배경 이미지로 삽입하는 방법이다.
background-size
속성으로 크기를 조절한다.
background-position
속성을 이용해 이미지의 위치 조정이 가능하다.
장점
- IE(Internet Explorer)에서도 호환된다. (Can I use?)
단점
이미지를 컨테이너로 한 번 감싼 후, 가운데 정렬한 뒤 컨테이너 크기를 벗어나는 이미지 부분을 자르는 방법.
< img > 요소에 top
과 left
, translate
등의 속성으로 이미지의 위치를 조절할 수 있다.
width
와 height
는 렌더링하고 싶은 이미지의 크기를 설정한다.overflow: hidden;
는 < div class='container' > 태그를 넘어가는 부분의 이미지는 잘라준다.position: relative;
는 < img > 태그에 position: absoulte를 해줄텐데 절대적인 위치의 기준점이 < div class='container' >이 되도록 설정한다.positon: absoulte;
는 position: relative 속성을 가지는 가장 가까운 요소를 기준으로 절대적인 위치를 가지도록 한다.width: 100%;
는 삽입된 이미지의 가로세로비를 유지한 채, 가로폭을 기준으로 세로 길이가 잘리도록 한다. 이때, 가로 길이는 < div class='container' >에 설정한 width이다.height: 100%;
는 삽입된 이미지의 가로세로비를 유지한 채, 세로폭을 기준으로 가로 길이가 잘리도록 한다. 이때, 세로 길이는 < div class='container' >에 설정한 height이다.width: 100%;
와 height: 100%;
를 모두 입력하면 삽입된 이미지의 가로세로비가 망가지더라도 < div class='container' >에 설정한 width와 height 길이만큼 늘어난다.top: 50%;
, left: 50%;
, transform: translate(-50%, -50%);
는 < img >태그를 < div class='container' > 안에서 가운데 정렬시킨다..container {
width: 원하는 px 혹은 rem 혹은 em;
height: 원하는 px 혹은 rem 혹은 em;
overflow: hidden;
position: relative;
}
.container > img {
position: absolute;
width: 100%;
/* height: 100%; */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
object-fit
속성을 이용해 이미지의 크기를 조절하는 방법
object-position
속성을 사용해 이미지의 위치를 조절할 수 있다.
object-fit
속성은 < img > 요소나 < video > 요소와 같은 대체 요소의 콘텐츠 크기를 조절하는 속성이다.
object-position
속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있다.
object-fit
속성 하나면 간편하게 이미지 크기를 설정할 수 있다.이미지를 < div > 태그에 background-image
속성을 이용해 배경 이미지로 삽입하는 방법이다.
background-size
속성으로 크기를 조절한다.
background-position
속성을 이용해 이미지의 위치 조정이 가능하다.
아래의 단점은 이미지가 콘텐츠가 아닌 꾸미는 용도인 배경 이미지로 삽입하려는 의도였다면 무관하다.
- 이미지를 삽입한 것인데 < img > 태그를 사용할 수 없어 UX나 SEO, 웹 접근성 측면에서 좋지 않다.
+ UX의 경우, < img > 태그에서 지원되는 이미지 복사 및 저장 기능을 사용할 없고 drag and drop 기능도 적용되지 않는다.- SEO나 웹 접근성 측면에선, 이미지가 < div > 태그로 인식되기 때문에 시맨틱한 마크업이라고 볼 수 없다.
Author And Source
이 문제에 관하여([HTML/CSS] 이미지 크기와 위치 조절 방법 3가지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bambi-bam/HTMLCSS-이미지-크기와-위치-조절-방법-3가지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)