[CSS] 이미지가 항상 center로 자리 잡는 반응형

HTML

<div class="img-size">
	<!-- 1번(red) == 화면크기 -->
	<div class="img-center">
		<!-- 2번(blue) -->
		<img class="img" src="https://picsum.photos/3000/500"></img>
		<!-- 3번(green) -->
	</div>
</div>

 

CSS

 

.img-size {
	position: relative;
	width: 100%;
	height: 600px;
	overflow: hidden;
}

.img-center {
	text-align: center;
	position: absolute;
	top: 0;
	right: -200%;
	bottom: 0;
	left: -200%;
}
    
.img {
	max-width: 100%;
	max-height: 100%;
}

 

See the Pen 이미지가 항상 center로 자리 잡는 반응형 by SEIN (@JHEcho) on CodePen.