CSS 이미지 반응형 수직 및 수평 centering_javascript 기술

최근 웨이보에서 CSS 센터링 기술이 인기를 끌고 있는 것을 보니 여러 자료를 읽어봤는데 그 중 별로 좋은 자료가 없어서 시간을 내어 관련 자료를 통합해 보면 다음과 같습니다.

여기를 클릭하세요소스 코드 다운로드

효과 표시:

요구사항:

1. 가능한 많은 브라우저와 호환됩니다. ie6이 max-*를 지원하지 않는 경우에는 고려되지 않습니다.

2. 브라우저 크기가 변경되면 이미지는 항상 비례적으로 늘어나거나 크기가 조정됩니다.

3. 이미지를 감싸는 div도 반응형이며 각 div의 크기는 동일합니다.

4. 이미지는 항상 가로, 세로 중앙에 위치합니다.

5. 그림의 행과 열 수는 변경되지 않고, 여기서는 항상 3*3입니다.

요구 사항을 하나씩 완료해 봅시다.

요구사항 1을 충족한다는 것은 중앙 정렬을 위해 고급 브라우저에서 일반적으로 사용되는 속성과 같이 고급 브라우저에서만 사용할 수 있는 속성을 사용하지 않도록 노력해야 함을 의미합니다.

display:table-cell;vertical-align;center;
flexbox
transform

. . .

이러한 특성을 사용해야 하는 경우 하위 버전 브라우저와 호환되는 대안이 있어야 합니다.

요구사항 2의 이미지를 비례적으로 늘이고 크기를 조정하는 것은 반응형 디자인에서 쉽게 달성할 수 있습니다.

이미지 img{max-width: 100%;}를 직접 변경하면 됩니다. 외부 너비가 이미지 너비보다 작은 크기로 설정되어도 이미지가 외부 div를 채우며 이때 이미지의 높이는 비례하여 계산됩니다.

이미지 크기가 640*480(4:3)이고 외부 div가 300px로 설정되어 이제 이미지 크기가 300*225(4:3)이 된 것을 확인할 수 있습니다.

요구사항 2에서 브라우저 크기가 변경되었습니다. 이것도 쉽습니다. 외부 div의 너비를 100%로 작성하면 됩니다.

외부 div의 크기가 어떻게 변하더라도 이미지의 가로 세로 비율은 절대 변하지 않는다는 것을 알 수 있습니다.

그리고 요구사항 3이 있는데, 외부 div가 반응형입니다.

첫 번째 반응은 크기를 100%로 설정하는 것입니다. 예를 들어 상단 효과에는 한 행에 세 개의 그림이 있습니다. 이미지를 감싸는 각 div의 너비를 33.3%로 설정하면 div는 내부 이미지에 비례하여 크기가 조정되거나 늘어납니다. 그러면 div의 높이는 고르지 않게 됩니다.

<div id='wrap'>
  <ul>
   <li>
    <p><img src="1.jpg"></p>
   </li>
      .....
  </ul>
 </div>

*{
  margin: 0;
  padding:0;
 }
 li{
  list-style-type: none;
  display:inline-block;
  vertical-align: middle;
  max-width: 200px;
  width: 32%;
  border:1px solid red;
 }
 img{
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  vertical-align: middle;
 }
 #wrap{
  max-width: 620px;
  font-size: 0;
 }

첫 번째 사진의 높이가 높이보다 200px을 초과한 것을 볼 수 있습니다. 당연히 이때 높이를 기준으로 너비를 조정해야 합니다. 비례적으로. Overflow:hidden;을 그림의 상위 요소에 추가하면 돼지 발을 볼 수 없습니다.

그렇다면 어떻게 외부 div를 반응형으로 만들 수 있을까요?

패딩 탑:100%;

<div id='wrap'>
  <ul>
   <li>
    <div class="dummy"></div>
   </li>
      ...
  </ul>
 </div>
 
 *{
  margin: 0;
  padding:0;
 }
 li{
  list-style-type: none;
  float: left;
  display: block;
  max-width: 200px;
  width: 32%;
  border:1px solid red;
 }
 .dummy{
  padding-top: 100%;
 }
 #wrap{
  max-width: 620px;
  font-size: 0;
 }

여기서 가로세로 비율은 1:1입니다. 가로세로 비율이 4:3이면 padding-top: 75%;로 설정하고 나머지도 마찬가지입니다.

요구사항 3이 완료되었으며, 다음은 요구사항 4입니다.

사진을 먼저 넣어주세요.

이때 이미지는 문서 흐름에서 분리되어 전체 이미지가 펼쳐집니다.

 img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  border: 2px solid blue;
 }

동시에 패키지 이미지 div 위치:relative;

위 이미지에서 margin: 0 auto는 가로 중앙에 위치할 수 있습니다.

아래에 남은 유일한 것은 이미지를 세로로 가운데에 배치하는 것입니다. 요구사항 5의 경우 행의 열 수를 설정하려면 가장 바깥쪽 div에 최대 너비만 설정하면 됩니다.

세로 중앙 정렬 방법은 여러 가지가 있는데 여기서는 이미지 위치:absolute;, 문서 흐름에서 벗어난 이미지를 가로 및 세로 중앙에 배치하려면 margin:auto;padding:auto;를 설정하면 생각하기 쉽습니다. CSS의 절대 수평 및 수직 센터링을 참조하세요.

그러나 이 방법은 ie7에서는 유효하지 않습니다. 따라서 이미지 외부에 div 레이어만 추가하면 됩니다.

여기에서는 매우 일반적인 수직 센터링 방법을 사용합니다.

 <li>
    <div class="dummy"></div>
    <p><img src="1.jpg"><i></i></p>
   </li>
 img{
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  vertical-align: middle;
 }
 i{
  display: inline-block;
  vertical-align: middle;
  height:100%;
 }

이번에는 e388a4556c0f65e1904146cc1a846bee 태그를 높이:100%로 설정해야 합니다. 그렇지 않으면 IE7에서는 5a8028ccc7a7e27417bff9f05adf5932 태그에 참조 높이가 없으므로 외부 태그와 동일한 높이에 도달할 수 없습니다. 컨테이너.

위 내용은 CSS 이미지의 반응형 수직 및 수평 센터링에 대한 이 기사의 모든 내용입니다.