반응형에서 이미지 비율 유지하기

반응형에서 이미지를 넣었을 때 이미지 비율 그대로 유지되는 방법을 끄적여봄~

unsplash @Pmh0UoG1vlE

이미지 그대로의 비율 유지하기

[HTML]

<div class="image-wrapper">
  <img class="image" />
</div>

 

[css]

.image-wrapper {  width: 100%;}.image {  max-width: 100%;  height: auto;}

 

가로 세로 비율 유지하기

[HTML]

<div class="image-wrapper">
  <img class="image" />
</div>

 

[css]

.image-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.26%;
	overflow: hidden;
}

.image-wrapper .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

여기서 . image-wrapper의 padding-bottom의 값을 변경하여 원하는 비율로 맞추면 된다

• 2:1 : padding-top: 50%
• 1:2 : padding-top: 200%
• 4:3 : padding-top: 75%
• 16:9 : padding-top: 56.25%