[CSS] 지정한 넓이와 높이에 맞게 이미지 가운데 정렬

조건 !

부모 넓이와 높이에 맞게 이미지가 가운데 정렬.

 

• <img> 태그 쓸 때 이미지 가운데 정렬.
  1. position: absolute
     1. margin
     2. transform
  2. object-fit
  3. display: flex
• background-image 쓸 때 이미지 가운데 정렬.
  1. background-size

 

1. <img> 태그

# 기본 html / css

<div class="absolute-img">
    <img src="https://cdn.pixabay.com/photo/2016/03/26/13/09/cup-of-coffee-1280537_1280.jpg">
</div>

html body { margin: 0; padding: 0; box-sizing: border-box; }

/* 공통 */
.aboslute-img {
    width: 300px;
    height: 300px;
    position: relative;
    margin: auto;
    overflow: hidden;
    border: 1px solid red;
}
.absoluteimg > img {
    /* 이미지를 가로폭에 맞출 때 width: 100% */
    width: 100%;
    /* 이미지를 세로폭에 맞출 때 height: 100% */
    height: 100%;
}

 

1-1. position: absoltue

1-1-1. margin

<div class="absolute-img">
    <img class="absolute-img-margin" src="https://cdn.pixabay.com/photo/2016/03/26/13/09/cup-of-coffee-1280537_1280.jpg">
</div>

.absolute-img-margin {
    height: 100%;
    position: absolute;
    left: -50%;
    margin-left: 25%;
}

 

1-1-2. transform

<div class="absolute-img">
    <img class="absolute-img-trans" src="https://cdn.pixabay.com/photo/2016/03/26/13/09/cup-of-coffee-1280537_1280.jpg">
</div>

.absolute-img-trans {
    position: absolute;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 

정리.

IE에서 object-fit이 지원되지 않을 때 absolute 사용.

(단, transform을 지원하지 않는 IE8이하에서는 margin-top, margin-left로 음수값을 준다.)

 

 

1- 2. object-fit

• <img>나 <video> 같은 오브젝트의 사이즈를 컨테이너 크기에 맞춰 조절가능.
• 넓이와 높이값을 입력하고 object-fit 속성만 지정하면 된다.

 

value	설명
fill	기본값. 주어진 너비와 높이에 맞게 조절. 이미지의 가로세로 비율 유지안됨.
contain	가로세로 비율 유지한 채 사이즈 조절 가능. 이미지와 컨테이너 간의 비율이 맞지 않을 경우 자리가 남게 된다.
cover	가로세로 비율 유지한 채 사이즈 조절 가능. 비율이 맞지 않더라도 컨테이너 완전히 채움 (background-size: cover 과 같다.)
none	본래의 이미지 사이즈 유지. 이미지가 가운데로 보여진다.
scale-down	none 또는 contain 중에 더 적절한 뱡향으로 이미지 사이즈 조절.

<div class="absolute-img">
    <img class="object-img" src="https://cdn.pixabay.com/photo/2016/03/26/13/09/cup-of-coffee-1280537_1280.jpg">
</div>

.object-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

 

최대단점.

IE 미지원

 

1-3. display: flex

<div class="flexbox-img">
    <img src="https://cdn.pixabay.com/photo/2016/03/26/13/09/cup-of-coffee-1280537_1280.jpg">
</div>

.flexbox-img {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    width: 300px;
    height: 300px;
    margin: auto;
    border: 10px solid red;
    overflow: hidden;
}
.flexbox-img > img {
    width: auto;
    height: 100%;
}

최대단점.

IE 미지원

 

 

 

2. background-image

2-1. background-size

• 배경에서만 들어갈 수 있어 이미지 태그에는 사용 불가능.
• 서버에서 이미지 주소를 전달하는 경우, 인라인 스타일로 background-image를 넣어줘야 한다.
• 이미지 태그를 쓸 수 없어 SEO나 사용자 측면에서는 기능이 떨어짐.

 

value	설명
contain	이미지의 가로세로 비율 유지. 넓이에 맞춤.
cover	이미지의 가로세로 비율 유지. 높이에 맞춰 주어진 크기 꽉 채움.
사이즈 직접 입력 (100%, 200px, 50em 등)	비율에 무관하게 입력한 값에 맞춰 사이즈 조절. 하나만 입력하면 가로값, 쉼표 없이 두개 입력하면 가로값과 세로값 동시 설정.

<div class="bg-img"></div>

.bg-img {
    width: 300px;
    height: 300px;
    margin: auto;
	background-image: url('https://cdn.pixabay.com/photo/2016/03/26/13/09/cup-of-coffee-1280537_1280.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

 

배경이미지에서만 사용 사용.

IE9+ 지원.

 

 

 

Reference

http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS

https://nykim.work/86