CSS 규모 여러 이미지는 뷰포트 유지 비율에 맞게

내가 한 페이지에 앨범의 모든 이미지를 나열 할 갤러리 만드는거야 : Big Picture style : 큰 그림과는 달리CSS 규모 여러 이미지는 뷰포트 유지 비율에 맞게

를, 내가 비례 에 이미지를 원하는 크기가 인 컨테이너 div (.section-images, margin: auto 2em;으로 설정되어 너비가 사용자 브라우저 너비 인 값인 2*2em)를 뷰포트 높이의 90 %보다 크게 만들지 않도록 조정하십시오.

당신이 상상하는 것처럼 너비에 맞게 조정하면 400x600 세로 사진이 너무 길어서 화면에 전체 이미지가 표시되지 않을 수 있습니다. 왜 너비가 90 %를 초과하지 않도록 조절해야하는지.

<section class="section-images"> 
    <div class="image-box"> 
     <div class="image-large"> 
      <a href="#"><img foo1></a> 
     </div> 
     <div class="image-description"> 
      blabla1 
     </div> 
     ... MORE IMAGES WITH DESCRIPTONS ... 
    </div> 
    etc 
</section>

각 이미지에 .image-description이 있으며 높이는 다양합니다.

중요한 것은 가로 또는 세로인지 여부에 관계없이 항상 한 이미지 (예 : .image-large)가 뷰포트에 맞아야한다는 것입니다.

가능한 경우 CSS에만 을 사용하고 싶습니다. CSS를 사용할 수없는 경우 JavaScript 만 가능합니다.

출처

2014-04-16 MindOverflow

솔루션 :가 (I는 간단 이해하고 함께 작업 할 수 있도록 컨테이너의 대부분을 스트라이프)

html, 
 
body, 
 
.section-images { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.section-images { 
 
    margin: auto 2em; 
 
    text-align: center; 
 
} 
 
img { 
 
    display: block; 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100%; 
 
    max-height: 90%; 
 
    margin: 20px auto; 
 
}

<section class="section-images"> 
 
    <a href="#"><img src="http://i.imgur.com/hMRnvUx.jpg" /></a> 
 
    <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div> 
 
    <a href="#"><img src="http://i.imgur.com/lBuIEDh.jpg" /></a> 
 
    <div class="image-description">blabla2</div> 
 
    <a href="#"><img src="http://i.imgur.com/k8BtMvj.jpgg" /></a> 
 
    <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div> 
 
</section>

설명 :

이 솔루션은 비율 크기 (너비와 높이)가 부모 요소의 크기에 상대적이라는 사실에 기반합니다. .section-images을 고려

을 설정하여 <body> 시작의 직접적인 자식 :

는

html, body, .section-images { 
    width:100%; 
    height:100%; 
    margin:0; 
}

그래서 직접 부모 이미지의는 뷰포트 크기 같습니다.

그런 다음, 당신은 쉽게 사용하여 이미지 크기를 할 수 있습니다 자신의 화면 비율을 유지하면서

img{ 
    width:auto; 
    height:auto; 
    max-width:100%; 
    max-height:90%; 
}

이미지 뷰포트의 100 % 폭을 90 % 높이를 초과하지 않습니다. 그리고 그들은 문서의 흐름에 머무를 것입니다.

출처

2014-04-16 13:30:27

이것은 완벽하게 작동하며 가능하고 비교적 쉽다는 것에 놀랐습니다. 감사합니다! – MindOverflow

이것은 정확히 내가 필요로하지만 불행히도 나는 [슬라이더] (http://kenwheeler.github.io/slick/)로 작업하고 있기 때문에 아이의 부모를 신체의 직접적인 아이가 될 수는 없다.) 몇 가지 div 래핑이 필요합니다. – J82

@ web-tiki 실제 이미지에 도달하기 전에 여러 개의 래핑이 있습니다. 그래서 나는 그들 모두에게 100 % 높이를 적용해야합니까? – J82

컨테이너의 높이를 명시 적으로 설정하고 overflow을 hidden으로 설정합니다.

출처

2014-04-16 13:09:34

응답 해 주셔서 감사합니다. 그러나 요구 사항을 충족하지 못했습니다. – MindOverflow

또한 IE9 +의 경우 html, body을 변경하지 않고 뷰포트 단위를 사용하여이 작업을 수행 할 수 있습니다.

img { 
    width:auto; 
    height:auto; 
    max-width:100%; 
    max-height:90vh; 
}

출처

2015-08-07 14:23:03 DonutReply

CSS 규모 여러 이미지는 뷰포트 유지 비율에 맞게

답변

관련 문제