方格响应

Question

我想要一些带有图像和输入的div我想让这个div响应并且图像完美契合并保留在框中。这就是我现在所做的：https://jsfiddle.net/qwafkxvo/1/。但是在大屏幕上，正方形变成了矩形，我不希望这样！而且图像并不完美，我该怎么办？

感谢您的建议。

<div class="col-xs-4 fileContainer padding-box">
    <div class="pic-box">
        <label for="input-1">
           <img id="blah" class="img-upload img-responsive" src="http://icons.iconarchive.com/icons/icons8/ios7/256/Weather-Little-Rain-icon.png" /><input id="input-1" class="input-upload" type="file" accept="image/*"/>
        </label>
    </div>
</div>

Answer 1

您必须使用width＆amp; padding-bottom修复以创建响应方块。

还可以使用position: absolute将内容放置在广场内。

检查更新的小提琴：https://jsfiddle.net/qwafkxvo/3/

参考代码：

＆＃13;

＆＃13;

.pic-box {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.padding-box {
  position: relative;
  margin: 1.66%;
  background-color: red;
  width: 30% !important;
  padding-bottom: 30%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: left;
}
label {
  display: inline-block;
  width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
  cursor: pointer;
}
.input-upload {
  display: none !important;
}
.img-upload {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-4 fileContainer padding-box">
    <div class="pic-box">
      <label for="input-1">
        <img id="blah" class="img-upload img-responsive" src="http://icons.iconarchive.com/icons/icons8/ios7/256/Weather-Little-Rain-icon.png" />
        <input id="input-1" class="input-upload" type="file" accept="image/*" />
      </label>
    </div>
  </div>

  <div class="fileContainer padding-box">
    <div class="pic-box">
      <label for="input-2">
        <img class="img-upload img-responsive" src="http://icons.iconarchive.com/icons/icons8/ios7/256/Weather-Little-Rain-icon.png" />
        <input id="input-2" class="input-upload" type="file" name="photos" accept="image/*">
      </label>
    </div>
  </div>

  <div class="col-xs-4 fileContainer padding-box">
    <div class="pic-box">
      <label for="input-3">
        <img class="img-upload img-responsive" src="http://icons.iconarchive.com/icons/icons8/ios7/256/Weather-Little-Rain-icon.png" />
        <input id="input-3" type="file" class="input-upload" name="photos" accept="image/*">
      </label>
    </div>
  </div>

  <div class="col-xs-4 fileContainer padding-box">
    <div class="pic-box">
      <label for="input-4">
        <img class="img-upload img-responsive" src="http://icons.iconarchive.com/icons/icons8/ios7/256/Weather-Little-Rain-icon.png" />
        <input id="input-4" type="file" class="input-upload" name="photos" accept="image/*">
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;