Divs를 리칭하지 않고 스트레칭하거나 Squishing하지 않는 방법?

Question

나는 분실했습니다. 나는 문자 그대로 4 시간 동안 이것을 알아 내려고 노력했고 곧 포기한다. 실제로 페이지를 다시 크기에 스트레칭이나 squishing에서 요소를 방지하기 위해 부트 스트랩 (또는 그냥 일반 CSS)를 사용하는 방법을 알아낼 수 없습니다. 나는 거기에 자바 스크립트의 다른 종류가 있다고 생각하지만, 나는 그것을 이해할 수 없다. 다음은 내가 말하는 것에 대한 예입니다. http://premiumlayers.com/demos/kappe/?storefront=envato-elements

설명해주십시오. 나는 아주 ... 지금 내가 좋은 얻기 위해 열심히 노력하고있어 나는조차 알아낼 수 없기 때문에 낙담하고있어

편집 :

:

여기

내 코드의 일부입니다 HTML은 :

.box { 
 
    width:33.333%; 
 
    height: calc(100vw/3); 
 
    display: block; 
 
    float: left; 
 
    background: lightblue; 
 
    border:1px solid #111; 
 
    box-sizing: border-box; 
 
    color:#222; 
 
} 
 

 
@media (min-width: @screen-md-min) { 
 
    .box { 
 
    width: 20vw; 
 
    height: 25vh; 
 
    } 
 
} 
 

 
@media (min-width: @screen-lg-min) { 
 
    .box { 
 
    width: 30vw; 
 
    height: 35vh; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="content-holder" class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"> 
 
      Box 
 
     </div> 
 
    </div> 
 
</div>

또한 부트 스트랩없이 사용하여 시도하지만, 문제는 계속했다.

Answer 1

이것은 인 flexbox을 사용하여 어느 정도 처리 할 수있다, 그러나 이미지는 컨테이너의 전체 폭을받지 않을 것 에.

예에서 상자의 크기가 사용 가능한 공간에 맞게 약간 조정되며 JS로 처리됩니다.

JS 바닥의 값에 들어갈 수있는 대략 얼마나 많은 이미지 발견 상기 JS에서

const wrap = document.querySelector('.wrapper'); 
const box = wrap.querySelectorAll('.box'); 
const boxWidth = 250; 

let calcBoxWidths = (function calcBoxWidths() { 
    let wrapWidth = wrap.offsetWidth; 
    let fitWidth = Math.round(wrapWidth/boxWidth); 
    let allBoxes = Array.prototype.slice.call(box); 

    allBoxes.forEach((thisBox)=>{ 
    thisBox.style.width = 100/fitWidth + "%"; 
    }); 
    return calcBoxWidths; 
})(); 

window.onresize =() => calcBoxWidths(); 

: 여기

크기 조정의 타입을 처리하는 방법의 간단한 예는 컨테이너의 폭. 그런 다음이 값을 백분율 값으로 변환하여 각 상자의 너비를 설정합니다.

---

바이올린 : http://jsfiddle.net/4sa9b5y8/3/

Answer 2

제공된 예제는 석조물 스타일 플러그인을 사용하여 항목을 배치하는 것이지만, 원하는대로 뷰포트 단위 만 사용할 수 있습니다.

div의 너비를 뷰포트 너비의 일부로 설정하면 축소 할 때 가로 세로 비율이 동일하게 유지됩니다. 그들은 완벽하게 적합 할 때까지

예를 들어 height: calc(100vw/3);

.item { 
 
    width:33.333%; 
 
    height: calc(100vw/3); 
 
    display: block; 
 
    float: left; 
 
    background: lightblue; 
 
    border:1px solid #111; 
 
    box-sizing: border-box; 
 
    color:#222; 
 
} 
 
    
 
@media (max-width: 1200px) { 
 
    .item { 
 
     width:33.333%; 
 
    } 
 
} 
 

 
@media (max-width: 800px) { 
 
    .item { 
 
     width:50%; 
 
    } 
 
} 
 

 
@media (max-width: 480px) { 
 
    .item { 
 
     width:100%; 
 
    } 
 
}

<div class="item">Item 1</div> 
 
<div class="item">Item 2</div> 
 
<div class="item">Item 3</div> 
 
<div class="item">Item 4</div> 
 
<div class="item">Item 5</div> 
 
<div class="item">Item 6</div>