동적 너비, 정적 높이 및 DPR 인식 응답 이미지 구현

웹 사이트의 각 게시물마다 헤더 이미지가 있습니다. 이 이미지의 너비는 100vw이고 높이는 300px입니다. img 태그 또는 완전 picture 요소의 srcset 속성을 통해이 이미지의 여러 버전을 제공하고 싶습니다.동적 너비, 정적 높이 및 DPR 인식 응답 이미지 구현

이렇게하면 srcset 속성을 사용하여 오히려 쉬울 것이다 : 나는 다른 기기 픽셀 비율을 설명 할 때

<img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg">

문제가 발생합니다. 먼저 위의 srcset에 나열된 모든 이미지 중 2x 및 3x 버전이 있다고 가정합니다.

내가 전체보기 포트 (예 : iPhone 5)를 사용하는 2x 전화가 있다고 가정 해 봅니다. 브라우저에 xs_2x.jpg을로드하고 싶습니다. 마찬가지로 와이드 스크린 모니터가있는 1x 데스크톱이 있다고 가정 해 보겠습니다. 브라우저에 lg.jpg을로드하고 싶습니다.

하지만 지금은 큰 전화기가 있다고 가정 해 봅시다. 하나는 3x, 414px - 넓은 뷰포트 (즉, iPhone 6 Plus)입니다. 이 경우 브라우저에 sm_3x.jpg을로드해야합니다. 그러나 sm_2x.jpg (1536 픽셀)의 너비가 너비가 sm_3x.jpg (2304 픽셀)보다 휴대 전화의 너비 (1242 픽셀)에 가깝기 때문에 브라우저에서 sm_2x.jpg을 대신로드 할 수 있습니다. 이로 인해 기기에서 300px이 아닌 이미지가 생성되어 웹 사이트의 요구 사항을 위반하게됩니다.

동적 폭, 정적 높이, DPR 의식이있는 이미지를 어떻게 구현할 수 있습니까?

출처

2015-01-29 Marcus McLean

미디어 태그를 사용해 본 적이 있습니까? – JaeGeeTee

@JaeGeeTee 미디어 태그 란 무엇입니까? CSS'@ media' 쿼리? –

예 @ 미디어 쿼리. 그날이 계속되면서 미안해. – JaeGeeTee

background-size: 100% cover;

이렇게하면됩니다.

편집 : 왜 이것이 효과가 있는지에 대한 간단한 이유는 CSS만으로 할 수 있기 때문입니다. 배경 크기는 사용 가능한 공간을 다룰 것입니다. 문서를 참조하십시오 : http://davidwalsh.name/background-size

다음의 CSS 클래스를 생성하십시오 : .img-resp { background-size: 100% cover; } 다음 요소에 적용하십시오.

출처

2015-02-05 17:42:47 Knostradamus

코드 블록은 일반적으로 유용한 답변이 아닙니다. 답변을 수정하고 표시하려는 코드가 무엇인지, 그리고 그 코드가 질문에 대답하는 이유/이유를 설명하십시오. –

-1

나는 당신의 정확한 요구를 얻지 못했습니다.

귀하의 요구 사항을 시험해보기 위해 제 코드를 제공하고 싶습니다. 이 코드를 사용해보십시오 :

<!DOCTYPE html> 
    <html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Responsive Images</title> 
     <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
     <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> 
     </script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> 
     </script> 
    </head> 
    <body> 

     <div class= "container-fluid"> 
     <div class="row"> 

<img src="http://www.technotrigger.com/wp-content/uploads/2014/01/house-in-green-field.jpg" 
    class="img-responsive"> 
      <!-- <img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg"> --> 
     </div> 
     </div> 
     </body> 
     </html>

출처

2015-02-10 03:04:24 Akilsree1

당신은 JPEG 이미지 해상도 (DPI)이 화면에 대한 의미가 있음을 고려해야한다. 여기서 가장 중요한 것은 픽셀의 총 가로/세로 수입니다.

이미지의 1x, 2x 및 3x 버전은 (장치 너비에 따라!) : Device - image size table

그래서 1 배 모니터와 3 배 아이폰 같은 이미지 (X 300 픽셀 1920 필요)하고 srcset 코드가 img_name_1920px.jpg 1920w

<img srcset="img_name_1920px.jpg 1920w, img_name_1136px.jpg 1136w, img_name_768px.jpg 768w, img_name_320px.jpg 320w" sizes="100vw" src="img_name.jpg">

참고가 될 것입니다 : 당신이 가진 기기를 사용하는 경우 320px의 화면 너비와 1x (망막이 아닌) 디스플레이 인 경우 너비 320px의 이미지를 사용해야합니다.

총 픽셀 수만 중요합니다.

출처

2015-02-11 07:41:57

동적 너비, 정적 높이 및 DPR 인식 응답 이미지 구현

답변

관련 문제