HTML5의 그림 요소를 사용하여 반응적으로 그림을 처리하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

HTML5의 그림 요소를 사용하여 반응적으로 그림을 처리하는 방법

小云云

Jan 05, 2018 pm 05:58 PM

h5 html5

반응형 디자인이라 불리는 것은 화면 해상도, 픽셀 밀도 비율, 너비가 서로 다른 단말 장치에서 웹 페이지 레이아웃을 적응적으로 조정할 수 있음을 의미합니다. 반응형 디자인의 원래 의도는 원래의 PC 웹사이트를 모바일 단말기와 호환되게 만드는 것입니다. 대부분의 반응형 웹페이지는 미디어 쿼리와 다양한 스타일의 CSS 파일 로딩을 통해 구현됩니다. 이러한 종류의 유연한 레이아웃은 다양한 장치 터미널에서 웹사이트의 레이아웃을 더욱 합리적으로 만듭니다. 이번 글에서는 주로 HTML5의 그림 요소의 반응형 이미지 처리에 대한 자세한 설명을 소개하고 있는데, 편집자 입장에서는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

반응형 디자인에는 많은 이점이 있지만 단점도 많습니다. PC와 모바일 단말이 동일한 웹사이트에 접속하기 때문에 PC는 트래픽 제한을 신경 쓸 필요가 없지만 모바일 단말은 이를 무시할 수 없다.

다양한 단말기 모델의 화면 너비와 픽셀 밀도에 적응하기 위해 일반적으로 다음 방법을 사용하여 이미지의 CSS 스타일을 설정합니다.

<style>
    img{
        max-width:100%;
        height:auto;
    }
</style>

로그인 후 복사

이미지의 최대 너비를 100%로 설정합니다. 이미지가 상위 요소의 너비를 초과하지 않는지 확인하세요. 상위 요소의 너비가 변경되면 이미지의 너비도 변경됩니다. height: auto는 이미지의 너비가 변경되면 높이도 변경되도록 합니다. 이미지는 자체 너비 대 높이 비율에 따라 크기가 조정됩니다.

이렇게 하면 모바일 기기에서 반응형 웹페이지의 이미지에 접근할 때 이미지의 해상도만 조정하고, 큰 이미지를 PC에 다운로드하게 되는데, 이는 트래픽을 낭비할 뿐만 아니라 대역폭도 낭비하게 됩니다. 웹페이지 열기 속도는 사용자 경험에 심각한 영향을 미칩니다.

새로운 솔루션:

는 HTML5의 새로운 요소입니다.
요소가 현재
```
<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">
    <source media="(min-width: 640px)" srcset="img/middle.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>
```
로그인 후 복사
2. 다음 밤에는 화면 방향이 조건으로 추가됩니다. 화면 방향이 가로인 경우 _landscape.png로 끝나는 이미지를 로드하고, 화면 방향이 세로인 경우 _portrait.png로 끝나는 이미지를 로드합니다.
3. 다음 밤에는 화면 픽셀 밀도가 조건으로 추가됩니다. 픽셀 밀도가 2x인 경우 이미지 _retina.png를 2x로 로드하고, 픽셀 밀도가 1x인 경우 망막 접미사 없이 이미지를 로드합니다. 4. 다음 chestnut의 조건으로 이미지 파일 형식을 추가하고, webp 형식 이미지가 지원되는 경우 webp를 로드하고, 지원되지 않는 경우 png 형식 이미지를 로드합니다.

<picture>
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">
    <source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">
    <source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

로그인 후 복사

5. 페이지는 현재 크기에 따라 현재 너비보다 크지 않은 가장 큰 이미지를 로드하도록 선택합니다. 6. 창 너비가 800px보다 크거나 같을 때 다음 속성에 크기를 추가합니다.

<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png,img/minpic_retina.png 2x">
    <source media="(min-width: 640px)" srcset="img/middle.png,img/middle_retina.png 2x">
    <img src="img/picture.png,img/picture_retina.png 2x" alt="this is a picture">
</picture>

로그인 후 복사

호환성:

현재 Chrome, Firefox 및 Opera만 호환됩니다. 구체적인 호환성은 그림에 표시되어 있습니다.

장점:

적절한 크기의 이미지를 로드하세요.

다양한 너비의 레이아웃 변경을 수용하기 위해 서로 다른 가로 세로 비율을 가진 이미지를 로드합니다.