正方形グリッドレスポンス

Question

画像と入力を含むdivが必要です。このdivsレスポンスと画像が完璧にフィットし、ボックスに残りたいと思っています。ここで私はそのときにやったことです：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 & padding-bottom修正プログラムを使用する必要があります。

また、position: absoluteを使用して四角形の中にコンテンツを配置します。

チェック更新フィドル：https://jsfiddle.net/qwafkxvo/3/

コード参照してください：

.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; 
 
}

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