반응형 컨테이너 내에서 이미지를 수직으로 정렬하려면 어떻게 해야 합니까?

반응형 컨테이너 내에서 이미지 수직 정렬

도전

정사각형 종횡비를 유지하는 컨테이너가 포함된 HTML 구조가 있습니다. 브라우저 창의 크기가 조정되었습니다. 이 컨테이너 안에 이미지를 추가하려고 하지만 수직 정렬을 유지해야 합니다. 이미지 높이가 가변적이고 컨테이너 높이를 고정할 수 없기 때문에 문제가 발생합니다.

해결책

CSS Inline 요소 사용

1. 인라인 블록 의사 요소를 컨테이너 요소의 첫 번째(또는 마지막) 하위 요소로 만들고 높이를 100%로 설정합니다. 전체 컨테이너 높이를 차지합니다.
2. 수직 정렬: 중간을 의사 요소와 이미지 모두에 설정하여 요소를 세로 중앙에 배치합니다.
3. 글꼴을 설정하여 요소 사이의 공백을 제거합니다. -크기: 0; 컨테이너 요소에서 문자(공백)가 차지하는 공간을 제거합니다.

HTML:

<div class="container">
    <div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <h3 id="컨테이너-만들기-반응형">컨테이너 만들기 반응형</h3><p>너비에 따라 높이의 크기가 조정되는 반응형 컨테이너를 만들려면 다음을 사용할 수 있습니다. 상단/하단 패딩 속성의 백분율 값:</p><pre class="brush:php;toolbar:false">.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

이미지 콘텐츠 래핑

컨테이너 상단 또는 하단에 과도한 공간을 피하려면 이미지를 래퍼 요소로 래핑하고 전체 공간을 채울 수 있도록 컨테이너 내에 절대적으로 배치합니다.

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

이미지 및 CSS 포함 정렬

HTML:

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
  </div>
</div>

이미지 정렬을 위한 CSS:

.img-container {
  text-align: center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

브라우저 호환성을 위한 대안

브라우저 간 더 나은 호환성을 위해 다음을 수행할 수 있습니다. 대신 이미지 컨테이너의 첫 번째 하위 요소로 div 요소를 사용합니다. 의사 요소:

HTML:

<div class="img-container">
    <div class="centerer"></div>
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
</div>

CSS:

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

이미지 제어에 max-* 속성 사용

이미지를 유지하려면 너비가 더 작을 때 컨테이너 내에서 max-height 및 max-width 속성을 사용할 수 있습니다. 이미지:

.img-container img {
    max-height: 100%;  /* Set maximum height to 100% of its parent */
    max-width: 100%;   /* Set maximum width to 100% of its parent */
}