aspect-ratio 두 번째

1. aspect-ratio

aspect-ratio는 에전에 한 번 다룬 적이 있다. 여기서 좀 더 추가하자면

aspect-ratio는 비율을 유지하는 블록 레벨 요소를 만드는 것이다. 예를 들면 16 대 9와 같은 비율을 만들어낸다. 

이러한 비율을 유지하기 위해서 몇가지 속성을 더 추가해야 한다.

 

• min-height: 0
  • auto를 주지 않는 이유는 auto의 경우 내부 콘텐츠 높이만큼 강제로 커지게 만드며, 유연하게 가능하지만 내부컨텐츠가 많아지면 요소 또한 커지게 되므로 auto을 주게되면 비율이 유지가 되지 않는다. 
  • 그래서 0을 주는 이유는, 내부 컨텐츠의 높이와 관계 없이 이미지가 aspect-ratio가 유지되게 한다.
• overflow: hidden
  • 이는 자식요소가 부모요소고와 분리되게 만드는 속성이다. 이 또한 aspect-ratio가 유지되게 한다.
  • min-height 컨트롤하는 것 말고도, overflew 속성을 이용함으로서도 자식요소가 부모요소의 높이 영향을 끼치는 것을 막을 수 있다.
• 자식요소(이미지, 영상)에 width: 100%, heigh:100%
  • 이는 aspect-ratio를 잡은 부모요소 크기에 높이, 너비를 100%로 꽉 차게 하는 것이다. 그래서 어떠한 이미지가 들어가더라도, 안정적으로 aspect-ratio가 잡은 비율을 강제되도록 할 수 있다. 만약 강제한 비율이 원본 이미지 비율랑 다르게 되면 이미지가 찌그러진다.