CSS로 이미지를 적응형으로 만드는 방법은 무엇입니까? CSS 이미지의 적응형 크기 방법 소개

웹페이지의 경우 배경 이미지가 보기 좋고 선명한 것이 매우 매력적이지만 모든 이미지의 크기가 동일하지 않기 때문에 시안 이미지를 적용한 다음 CSS를 만드는 방법 사진 적응? 이 기사에서는 CSS 이미지의 크기를 조정하는 방법을 소개합니다.

예를 직접 살펴보겠습니다.

<div class="wrapper">
    <!--背景图片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代码 ... --></div>

#web_bg{
  position:fixed;  
  top: 0;  
  left: 0;  
  width:100%;  
  height:100%;  
  min-width: 1000px;  
  z-index:-10;  
  zoom: 1;  
  background-color: #fff;  
  background-repeat: no-repeat;  
  background-size: cover;  
  -webkit-background-size: cover;  
  -o-background-size: cover;  
  background-position: center 0;
}

위의 예에서는 이 CSS 코드가 어떻게 이미지의 크기를 적응적으로 조정하는지 분석해 보겠습니다.

우선 CSS 이미지 적응형 크기에서 이 세 문장의 역할을 살펴보겠습니다.

  position:fixed;  
  top: 0;  
  left: 0;

설명: 이 세 문장을 사용하면 전체 div 컨테이너를 화면 상단과 왼쪽에 고정됩니다.

두 번째로 CSS 이미지 적응형 크기에서 다음 문장의 역할을 살펴보겠습니다.

  width:100%;  
  height:100%;  
  min-width: 1000px;

설명: 이 문장은 전체 div를 화면과 같은 크기로 만듭니다. , 전체 화면 효과를 얻기 위해 min-width 는 화면 너비가 1000px 이내일 때 div의 크기가 변경되지 않도록 보장하는 것입니다. 즉, 이 경우 화면 너비를 조정할 때 이미지는 다음과 같아야 합니다. 크기가 조정되지 않습니다(1000px 이내만 유효).

다음으로 이 코드를 살펴보겠습니다.

  z-index:-10;

설명: 이는 전체 div를 HTML 페이지의 각 수준 아래에 배치하는 것입니다. 생성된 레벨의 z-index 값은 0이므로 여기에 -1을 쓰면 달성할 수도 있습니다. 그러나 여기에 -10을 쓰면 전체 div가 맨 아래에 있게 됩니다. 페이지에서 -1을 사용하는 경우가 있는데 꼭 맨 아래에 있을 필요는 없지만 -100처럼 큰 숫자로 쓰면 의미가 없습니다. 사용 인덱스:-10 이렇게 하면 배경 이미지처럼 보일 수도 있지만 실제로는 가장 일반적인 div입니다. 계층적 관계만 변경하여 배경 이미지처럼 보이게 했습니다.

  background-repeat: no-repeat;

참고: 이것은 배경이므로 반복하지 마세요.

  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;

설명: 위 세 문장은 같은 의미로 화면 크기에 맞춰 화면 크기를 조정한다는 뜻이지만, 일부가 잘릴 수 있지만 노출되지는 않습니다. 문장은 크롬과 오페라 브라우저 호환성을 위한 것입니다.

마지막으로 마지막 문장을 살펴보겠습니다:

background-position: center 0;

설명: 위 문장은 사진의 위치를 ​​의미합니다. 중앙 정렬, 왼쪽 정렬 .

위 CSS 코드에서 언급된 다양한 속성에 대해 더 자세히 알고 싶다면 css manual을 참조하세요.

관련 추천:

css 그림 적응형 크기_이미지 특수 효과

#🎜 🎜#How CSS를 사용하여 이미지를 화면에 맞게 조정하려면?

위 내용은 CSS로 이미지를 적응형으로 만드는 방법은 무엇입니까? CSS 이미지의 적응형 크기 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!