부트스트랩 - 이미지용 CSS 클래스입니다. 적응형 이미지 레이아웃: 문제 및 가능한 해결 방법 이미지를 적용하는 방법

적응형이며 브라우저 지원 정도와 복잡성이 모두 다릅니다. 반응형 이미지를 구현하는 복잡한 방법의 예로는 여러 이미지와 더 많은 마크업이 필요하고 브라우저 지원에 따라 달라지는 srcset 속성을 사용하는 것입니다.

불필요한 지루함을 버리자. 최신 사양을 사용하면 웹사이트 페이지에 사용되는 이미지를 유연하게 만들고 다양한 사용자 장치의 화면에 올바르게 표시할 수 있습니다. 이를 위해서는 CSS 클립의 몇 가지 속성만 사용하면 충분합니다.

적응형 이미지, 단일 이미지, 두 개 이상의 열로 구성된 이미지의 여러 변형 예는 물론 적응성이 보장된 대형 배경 이미지를 사용하는 예도 준비했습니다. 모든 옵션은 이미지의 너비 속성에 대한 백분율 값과 높이 속성에 대한 자동 값을 사용하는 것을 기반으로 합니다.

img(너비: 100%; 높이: 자동;)

img(너비: 100%; 높이: 자동; )

기본 반응형 이미지 값

게시물이나 기타 개별 블록에 사용되는 단일 이미지를 완벽하게 반응하도록 만드는 데 필요한 기본 예부터 살펴보겠습니다.
예를 들어, 기본 너비를 96%로 지정한 컨테이너가 있습니다. 최대 너비를 max-width: 960px로 설정합니다. , 이 블록에서는 적응형 이미지를 표시해야 합니다.
이 요소의 경우 컨테이너 내부에서는 너비를 100%로 설정하여 뷰포트의 크기에 관계없이 너비가 항상 컨테이너 너비와 같도록 합니다. 따라서 높이를 자동 모드로 전환하면 이미지가 비례하여 변경됩니다.

div.container ( width : 96% ; max-width : 960px ; margin : 0 auto ; /* 메인 컨테이너를 중앙에 배치 */ ) img ( width : 100% ; /* 이미지 너비 */ height : auto ; /* 이미지 높이 * / )

div.container ( width: 96%; max-width: 960px; margin: 0 auto; /* 메인 컨테이너를 중앙에 배치 */ ) img ( width: 100%; /* 이미지 너비 */ height: auto; /* 이미지 높이 * / )

그것을 참고 HTML 속성의 너비 및 높이에 대한 고정 값이 마크업에 직접 지정된 경우에도 요소는 반응합니다.

반응형 열 이미지

때로는 간단한 이미지 갤러리를 구성하기 위해 이미지가 나란히 정렬되어 있거나 그리드로 표시되기를 원할 때가 있습니다.
이렇게 하려면 위에서 사용한 코드를 약간만 변경하면 됩니다. 첫 번째는 width 속성을 줄이고 요소를 설정하는 것입니다. 표시 속성의 인라인 블록 값, 즉 인라인으로 만드세요.
두 가지 레이아웃, 즉 2열 이미지 레이아웃과 3열 레이아웃을 살펴보겠습니다.

1. 2열 이미지 레이아웃
2열 이미지 레이아웃의 경우 너비를 48%, 즉 컨테이너의 약 절반으로 설정할 수 있습니다. 측면 패딩을 갖기 위해 값을 50%로 설정하지 않습니다.

img(너비: 32%; 디스플레이: 인라인 블록;)

img (너비: 32%; 디스플레이: 인라인 블록; )

적응형 이미지의 조건부 배치

다음 예에서는 보기 장치에 따라 배열이 다른 적응형 이미지를 사용하는 옵션을 고려해 보겠습니다. 스마트폰에서 볼 때 이미지는 한 열, 태블릿에서는 두 열, 큰 화면에서는 네 열에 표시됩니다.
이를 구현하기 위해 @media 미디어 쿼리를 사용하여 이 최대 이미지 너비 max-width가 적용될 미디어 유형을 지정합니다.

/* 소형 장치(스마트폰) */ img ( max-width: 100%; display: inline-block; ) /* 중형 장치(태블릿) */ @media (min-width: 420px) ( img ( max- width: 48%; ) ) /* 대형 장치(노트북, PC)의 경우 */ @media (min-width: 760px) ( img ( max-width: 24%; ) )

그것은 모두 매우 간단합니다, 그렇죠? 미디어 쿼리의 아이디어는 훌륭하고 꽤 오랫동안 사용되어 왔으며 널리 사용되었습니다. 예제에 표시된 매개변수는 이 특정 레이아웃에서 잘 작동합니다. 다른 디자인에서 어떻게 작동하는지 주의 깊게 확인해야 합니다.

전체 화면 반응형 이미지

뷰포트 크기를 100% 채우는 와이드 형식의 반응형 이미지를 만들려면 컨테이너의 max-width 속성(값 960px)을 제거하고 너비를 100%로 설정하면 됩니다. 이미지 너비도 100%로 설정됩니다.

.container (너비: 100% ; ) img (너비: 100% ; )

컨테이너(너비: 100%; ) img(너비: 100%; )

이 기술은 사용하기 매우 쉽고 강력한 브라우저 지원을 제공하지만 이미지는 항상 전체 크기로 표시된다는 점을 기억해야 합니다. 고해상도의 대형 이미지가 공간 전체를 가득 채우고 표시되는데, 이는 소형 ​​모바일 기기의 경우 이미지를 배경 이미지로 사용하지 않는 한 항상 적합하지 않습니다.

아마 그게 전부일 것입니다. 다양한 장치에 대해 다양한 크기의 별도 이미지를 사용하려는 경우 이를 사용하면 더 이상 악화되지 않습니다. 이미지를 적응형으로 만드는 다른 방법을 알고 계시나요? 댓글을 작성해 주시면 확실히 고려해 보겠습니다. 새로운 방법은 항상 흥미로울 것입니다.

적응형 이미지는 반응형 웹 디자인의 문제점 중 하나입니다. 고해상도 디스플레이에 고해상도 이미지를 사용하고 디스플레이 해상도가 낮은 장치의 크기를 줄이기 시작했을 수 있습니다. 이는 저해상도 디스플레이가 있는 장치 소유자에게 아무런 이점도 없이 단순히 트래픽을 소모할 뿐입니다. 또는 여전히 대형 화면과 고해상도 디스플레이에서는 형편없어 보이는 저해상도 이미지를 사용하고 있습니다. 이 문제를 해결하기 위해 많은 해킹이 만들어졌습니다.

아직 반응형 이미지에 대한 사양이 없다는 사실에 속상했습니다. 2011년 11월에 저는 태그를 제안했습니다. 그림. 이 요소는 태그 메커니즘을 사용합니다. 동영상미디어 쿼리와 결합:

제안된 요소 사이 그림그리고 속성 srcset두 가지 주요 차이점이 있습니다. 가장 분명한 것은 속성이 srcset요소에 사용됨 img는 원래 이미지용으로 만들어졌습니다. 그리고 그것은 훌륭합니다.

두 번째 차이점은 속성을 사용한다는 것입니다. srcset미디어 쿼리를 제공하지 않습니다. 미디어 쿼리를 사용하면 모든 해상도, 장치 방향, dpi, 색상 심도 및 종횡비에 대한 매개변수를 설정할 수 있습니다. 반면에 각 이미지 변형에 대해 미디어 쿼리를 설정하면 코드가 몇 배 증가할 수 있습니다.

오코너는 이렇게 썼습니다.

미디어 쿼리가 아닌 스케일 팩터를 제안하는 이유는 무엇입니까? 미디어 쿼리는 사용자 에이전트 데이터를 사용하여 작동하지만 다양한 이미지 옵션 간의 관계에 대해 논의하고 있습니다. 또한 사용자 에이전트는 미디어를 사용하여 지정된 매개변수뿐만 아니라 현재 상태에 가장 적합한 이미지 옵션을 자유롭게 선택할 수 있어야 합니다. 쿼리뿐만 아니라 요소에 제공된 차원 img CSS를 사용하고 현재 페이지 크기 조정 값을 사용할 수도 있습니다.

정보 수신 속도, 대기 시간, ppi, 장치 방향 등의 데이터를 기반으로 브라우저가 가장 적절한 이미지 옵션을 선택할 수 있도록 하는 아이디어가 마음에 듭니다. 아이디어는 개발자가 특정 이미지 옵션을 사용해야 하는 조건을 설명할 필요가 없도록 하는 것입니다. 이미지 데이터, 크기, 밀도만 지정하면 브라우저 자체가 이 상황에 가장 적합한 것을 결정합니다.

제안된 속성 srcset두 가지 단점이 있습니다. 첫 번째는 매우 주관적이지만 많은 사람들이 내 의견에 동의할 것입니다. 지금과 같은 사양에는 끔찍한 구문이 있습니다.

srcset="face-600-200-at-1.jpeg 600w 200h 1x,
얼굴-600-200-at-2.jpeg 600w 200h 2x,
얼굴-icon.png 200w 200h">

물론 이것은 고쳐질 수 있고 고쳐져야 합니다. 이는 단지 코드의 미학에 관한 것이 아닙니다. 구문이 너무 혼란스러우면 올바르게 사용되지 않습니다.

두 번째 문제는 개발자가 프로세스 제어 능력을 잃고 싶어하지 않는다는 것입니다. 이는 시각적 내용이 전달하는 의미를 상실하는 문제입니다.

안녕하세요 여러분. 새 기사가 늦어졌습니다(며칠 휴가를 내고 바닷가에 갔습니다). 하지만 이 기사를 통해 이 사건을 조금이라도 보완할 수 있기를 바랍니다. :)

적응형 이미지의 문제는 매우 관련성이 높으므로 약간의 추론과 구현 방법부터 시작한 다음 제 생각에 가장 적합한 옵션을 강조하겠습니다.

그래서 약 1년 전에 저는 이미지를 반응형으로 만들려면(즉, 컨테이너 너비에 맞게 늘리거나 줄이려면) 다음 코드를 사용하면 된다고 생각했습니다.

래퍼 img(너비: 100%; )

그리고 실제로 어떤 경우에는 이것이 제한될 수 있습니다. 이 트릭은 브라우저 창이 작아질 때 효과적입니다. 하지만 이미지가 담긴 컨테이너의 너비가 이미지의 해상도보다 커지면 어떻게 될까요? 오른쪽. 이미지는 컨테이너 너비에 걸쳐 늘어나지만 품질은 많이 아쉽습니다. 하지만 2048x1536px 해상도에 대한 지원이 필요하다면 어떻게 될까요?

svg를 사용하지 않고 래스터 이미지인 경우 가장 먼저 떠오르는 것은 랜딩 페이지의 최대 해상도에 맞는 사진을 찍고 브라우저 창 크기를 조정하면 다음과 같이 압축됩니다. 정상적인 품질.

그리고 성능 문제가 발생합니다. 스마트폰이 망막 해상도에서 보기 좋게 보이는 이렇게 큰 이미지를 로드하는 것은 어리석은 일입니다. 결국 모바일 네트워크의 속도는 PC만큼 빠르지 않으며 일부 사용자는 스마트폰에 랜딩 페이지가 로드될 때까지 기다리지 않을 수도 있습니다. 결과적으로 클라이언트를 잃게 됩니다.

사진이 포함된 여러 div를 설정한 다음 미디어 쿼리를 사용하여 불필요한 div를 숨기고 현재 해상도에 맞는 사진만 표시할 수 있습니다.

문제가 해결된 것 같습니다. 그러나 사실은 페이지 표시 속도를 높이기 위해 브라우저가 CSS 처리를 시작하기 전에 html로 작성된 이미지를 미리 로드한다는 것입니다. 아마도 제가 제 생각을 정확하게 표현하지 못했을 수도 있지만(수정해 주세요), 이 트릭을 수행하면 CSS에 작성된 내용에 관계없이 모든 이미지가 계속 로드됩니다. 이는 우리가 모바일 장치의 상황을 더욱 악화시켰음을 의미합니다. 이제 그들은 하나가 아닌 여러 개의 이미지를 업로드해야 합니다.

개발자 도구를 열고 “네트워크” 탭을 보면 이를 확인할 수 있습니다.

일반적으로 적응형 이미지를 생성할 때 발생할 수 있는 문제는 여전히 많습니다. 그리고 상당수의 솔루션도 축적됐다. 그것은 모두 특정 상황에 달려 있습니다.

HTML 5에서는 대부분의 문제를 해결할 수 있는 그림 태그가 등장했으며 적응형(반응형) 디자인을 만들기 위해 특별히 만들어졌습니다. 그 디자인은 비디오 및 오디오 태그를 연상시킵니다. 작업의 본질은 특정 화면 해상도에 맞게 그림 태그 내부에 여러 이미지가 지정된다는 것입니다. 다음과 같이 보입니다.

특이한 점은 src 대신 srcset을 사용하고 미디어 쿼리와 유사한 것을 사용한다는 것입니다. 작은 이미지는 319px 미만의 해상도로 로드됩니다. 해상도가 320px~480px인 평균 이미지 등

이 페이지에서 그림 태그에 대한 현재 브라우저 지원을 확인할 수 있습니다.

일반적으로 새 태그를 사용할 때는 이 사이트를 보고 현황을 확인하는 것이 좋습니다.

보시다시피 현재 상황은 아쉬운 점이 많습니다. IOS 장치, Macbook 및 IE에서는 지원되지 않습니다(IE 사용자는 이에 대해 미안함을 느끼지 않지만 고통을 겪을 것입니다 :)). 우리 모두는 너무 많은 사용자를 잃을 준비가 되어 있지 않다고 생각합니다. 아니요, 제가 잘못 표현했습니다. 메인 이미지가 올바르게 로드되고 표시되므로 잃어버리지 마세요. 하지만 그럼에도 불구하고 페이지 로딩 시간이 길어 Apple 기술을 사용하는 고객을 잃지 않았으면 좋겠습니다. 왜냐하면 이는 솔벤트 잠재고객일 가능성이 높기 때문입니다. :)

지금 이 태그를 활용하려면 (head 태그 사이에) picturefill.js라는 작은 스크립트를 사용해야 합니다.

이제 모든 장치는 적응형 이미지의 레이아웃을 위해 이 구조를 지원해야 합니다. 사실, 저는 Mac에서 테스트해 본 적이 없습니다(아직 가지고 있지도 않습니다).

위에서 설명한 방법과 달리 이제는 이전과 같이 3개의 이미지가 아닌 1개의 이미지만 로드됩니다.

이것은 까다로운 방법이 아닙니다. 이미지를 반응형으로 만드는 방법은 무엇입니까? 여러분의 방법을 댓글로 공유해주세요. 감사합니다.

적응형 이미지의 문제는 매우 관련성이 높으므로 약간의 추론과 구현 방법부터 시작한 다음 제 생각에 가장 적합한 옵션을 강조하겠습니다.

그래서 약 1년 전에 저는 이미지를 반응형으로 만들려면(즉, 컨테이너 너비에 맞게 늘리거나 줄이려면) 다음 코드를 사용하면 된다고 생각했습니다.

래퍼 img(너비: 100%; )

그리고 실제로 어떤 경우에는 이것이 제한될 수 있습니다. 이 트릭은 브라우저 창이 작아질 때 효과적입니다. 하지만 이미지가 담긴 컨테이너의 너비가 이미지의 해상도보다 커지면 어떻게 될까요? 오른쪽. 이미지는 컨테이너 너비에 걸쳐 늘어나지만 품질은 많이 아쉽습니다. 하지만 2048 x1536px 해상도에 대한 지원이 필요하다면 어떻게 될까요?

svg를 사용하지 않고 래스터 이미지인 경우 가장 먼저 떠오르는 것은 랜딩 페이지의 최대 해상도에 맞는 이미지를 가져오고 브라우저 창 크기를 조정하면 다음과 같이 압축됩니다. 정상적인 품질.

그리고 성능 문제가 발생합니다. 스마트폰이 망막 해상도에서 보기 좋게 보이는 이렇게 큰 이미지를 로드하는 것은 어리석은 일입니다. 결국 모바일 네트워크의 속도는 PC만큼 빠르지 않으며 일부 사용자는 스마트폰에 랜딩 페이지가 로드될 때까지 기다리지 않을 수도 있습니다. 결과적으로 클라이언트를 잃게 됩니다.

사진이 포함된 여러 div를 설정한 다음 미디어 쿼리를 사용하여 불필요한 div를 숨기고 현재 해상도에 맞는 사진만 표시할 수 있습니다.

문제가 해결된 것 같습니다. 그러나 사실은 페이지 표시 속도를 높이기 위해 브라우저가 CSS 처리를 시작하기 전에 html로 작성된 이미지를 미리 로드한다는 것입니다. 아마도 제가 제 생각을 정확하게 표현하지 못했을 수도 있지만(수정해 주세요), 이 트릭을 수행하면 CSS에 작성된 내용에 관계없이 모든 이미지가 계속 로드됩니다. 이는 우리가 모바일 장치의 상황을 더욱 악화시켰음을 의미합니다. 이제 그들은 하나가 아닌 여러 개의 이미지를 업로드해야 합니다.

개발자 도구를 열고 “네트워크” 탭을 보면 이를 확인할 수 있습니다.

일반적으로 적응형 이미지를 생성할 때 발생할 수 있는 문제는 여전히 많습니다. 그리고 상당수의 솔루션도 축적됐다. 그것은 모두 특정 상황에 달려 있습니다.

HTML 5에서는 대부분의 문제를 해결할 수 있는 그림 태그가 등장했으며 적응형(반응형) 디자인을 만들기 위해 특별히 만들어졌습니다. 그 디자인은 비디오 및 오디오 태그를 연상시킵니다. 작업의 본질은 특정 화면 해상도에 맞게 그림 태그 내부에 여러 이미지가 지정된다는 것입니다. 다음과 같이 보입니다.

특이한 점은 src 대신 srcset을 사용하고 미디어 쿼리와 유사한 것을 사용한다는 것입니다. 작은 이미지는 319px 미만의 해상도로 로드됩니다. 해상도가 320px~480px인 평균 이미지 등

일반적으로 새 태그를 사용할 때는 이 사이트를 보고 현황을 확인하는 것이 좋습니다.

보시다시피 현재 상황은 아쉬운 점이 많습니다. IOS 장치, Macbook 및 IE에서는 지원되지 않습니다(IE 사용자는 안타까워하지 않지만 고통을 겪을 것입니다). 우리 모두는 너무 많은 사용자를 잃을 준비가 되어 있지 않다고 생각합니다. 아니요, 제가 잘못 표현했습니다. 메인 이미지가 올바르게 로드되고 표시되므로 잃어버리지 마세요. 하지만 그럼에도 불구하고 페이지 로딩 시간이 길어 Apple 기술을 사용하는 고객을 잃지 않았으면 좋겠습니다.

지금 이 태그를 활용하려면 (head 태그 사이에) picturefill.js라는 작은 스크립트를 사용해야 합니다.

이제 모든 장치는 적응형 이미지의 레이아웃을 위해 이 구조를 지원해야 합니다. 사실, 저는 Mac에서 테스트해 본 적이 없습니다(아직 가지고 있지도 않습니다).

위에서 설명한 방법과 달리 이제는 이전과 같이 3개의 이미지가 아닌 1개의 이미지만 로드됩니다.

적응형 레이아웃의 주요 작업 중 하나는 이미지(배경 이미지 포함)의 크기를 조정하여 화면 해상도가 다른 기기에서 올바르게 표시되도록 하는 것입니다.

img 태그의 이미지를 사용하면 모든 것이 간단합니다. 너비를 백분율로 설정하면 높이가 자동으로 조정됩니다. 이 방법은 배경 이미지에는 적용할 수 없습니다.

이 트릭은 요소의 패딩에 백분율 값을 설정하는 것입니다. 이 방법은 이전 블로그 기사 A List Apart에 처음 게시되었지만 여전히 잘 작동합니다.

800 x 450 픽셀의 배경 이미지가 있고 이를 고정된 화면비 16:9의 배경으로 만들고 싶다고 가정해 보겠습니다. 아래 코드는 들여쓰기에 px를 사용하지만 em에서도 작동합니다. HTML5 그림 요소도 있습니다. 이전 브라우저에서 올바르게 작동하도록 하려면 HTML5 shiv 를 사용할 수 있습니다.

Div.column ( 최대 너비: 800px; ) Figure.fixedratio ( 패딩 상단: 56.25%; /* 450px/800px = 0.5625 */ )

배경 추가 결과 요소는 예상대로 크기가 조정되지만 배경 이미지를 추가하면 결과가 좋지 않습니다. background-size:cover 속성을 사용합니다. 안타깝게도 이 방법은 Internet Explorer 8에서는 작동하지 않습니다. 이 문제를 해결하기 위해 background-position을 사용하여 배경의 위치를 ​​지정합니다. 배경 이미지의 너비는 최소한 요소의 최대 너비와 같아야 합니다. 그렇지 않으면 사진이 잘립니다.

Div.column( /* 배경 이미지의 너비는 800px이어야 합니다 */ max-width: 800px; ) Figure.fixedratio( padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg); 배경 크기: 덮개; -moz-배경-크기: /* Firefox 3.6 */ 배경 위치: 센터;

데스크톱에 보기 좋게 보이는 큰 배경 이미지가 있다고 가정해 보겠습니다. 그러나 모바일 장치에서는 너무 작으므로 올바른 해결책은 배경 너비를 줄이는 것입니다.

예를 들어 너비가 300픽셀인 작은 화면에서 너비가 800 x 200픽셀(4:1)인 이미지는 150픽셀(2:1)로 줄여야 합니다. height 및 padding-top 속성을 계산해 보겠습니다.

그림은 다양한 너비의 배경 이미지의 종횡비를 보여줍니다. 그래프의 기울기는 padding-top 속성에 해당하고 시작 높이는 ​​높이 속성에 해당합니다. 결과 코드는 다음과 같습니다.

Div.column( /* 배경 이미지의 너비는 800px이어야 합니다 */ max-width: 800px; ) Figure.fluidratio( padding-top: 10%; /* 기울기 */ height: 120px; /* 시작 높이 */ background- 이미지: url(http://voormedia.com/examples/amsterdam.jpg); 배경 크기: 표지; -moz-배경-크기: /* Firefox 3.6 */ 배경 위치: 센터 /* Internet Explorer 7 /8 */ )

계산을 위해 SCSS 사용 패딩 상단 및 높이 속성은 SCSS와 같은 전처리기를 사용하여 자동으로 계산할 수 있습니다. 이에 대한 예:

/* 두 차원(너비/높이)을 기준으로 유체 비율을 계산합니다. */ @mixin liquid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -작은: nth($작은 크기, 1); $높이-큰: nth($큰 크기, 2); $높이-작은: nth($작은 크기, 2); / ($width-large - $width-small); $height: $height-small * $slope * 100% ; ; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) Figure.fluidratio ( /* 이 요소는 800px에서 4:1부터 300px까지의 유동 비율을 갖습니다. */ @include 유동 비율(800px 200px, 300px 150px); 배경 이미지: url(http://voormedia.com/examples/amsterdam.jpg);