집 > 기사 > 웹 프론트엔드 > CSS로 이미지를 적응형으로 만드는 방법은 무엇입니까? CSS 이미지의 적응형 크기 방법 소개

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

不言원래의: 2018-09-11 13:45:0819535검색

웹페이지의 경우 배경 이미지가 보기 좋고 선명한 것이 매우 매력적이지만 모든 이미지의 크기가 동일하지 않기 때문에 시안 이미지를 적용한 다음 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로 이미지를 적응형으로 만드는 방법은 무엇입니까? CSS 이미지의 적응형 크기 방법 소개

관련 기사