代码之家 › 专栏 › 技术社区 › user5132897

如何在不拉伸或挤压的情况下重新调整div的大小?

resize responsive-design twitter-bootstrap css

user5132897 · 技术社区 · 7 年前

我不知所措。我已经连续四个小时试图解决这个问题,我放弃了。我不知道如何实际使用引导(或只是常规的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>

我也尝试过在没有引导的情况下使用它,但问题仍然存在。

2 回复 | 直到 7 年前

Alex 7 年前

这可以在一定程度上使用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/

cnrhgn 7 年前

您提供的示例是使用砖石样式插件来布局项目,但对于所需内容,您可以只使用视口单元。

设置 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>