如何在不拉伸或压扁它们的情况下调整 Div 的大小？

Question

我很茫然。我已经连续四个小时试图解决这个问题，但我放弃了。我无法弄清楚如何实际使用 bootstrap（或只是常规的 CSS）来防止元素在页面重新调整大小时拉伸或挤压。我认为还涉及其他某种 javascript，但我无法弄清楚。这是我正在谈论的示例：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>

我也试过在没有 bootstrap 的情况下使用它，但问题仍然存在。

Answer 1

您提供的示例是使用砌体样式插件来布置项目，但对于您想要的，您可以只使用视口单位。

将 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>

Answer 2

这可以在一定程度上使用 flexbox 来处理，但是图像在完全适合之前不会占据容器的整个宽度。

在您的示例中，框会稍微调整大小以适应可用 space，这是用 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();

在上面的 JS 中，找到了一个 floored 值，表示容器的宽度可以容纳多少张图片。然后将其转换为百分比值以设置每个框的宽度。

Fiddle: http://jsfiddle.net/4sa9b5y8/3/

如何在不拉伸或压扁它们的情况下调整 Div 的大小？

How to Re-size Divs Without Stretching or Squishing Them?

css

resize

responsive-design

twitter-bootstrap