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处理到一定程度，但是图像不会占用容器的整个宽度，直到它们完全适合。

在您的示例中，框稍微调整大小以适应可用空间，这可以通过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中，大致有多少图像可以容纳在容器的宽度中。然后将其转换为百分比值以设置每个框的宽度。

<强>小提琴： http://jsfiddle.net/4sa9b5y8/3/

如何在没有拉伸或剔除它们的情况下重新划分界限？

2 个答案: