Square grid responsive

Question

Ich möchte einige Divs mit Bild und Eingabe im Inneren Ich möchte diese divs reagieren und das Bild, um perfekt zu passen und in der Box bleiben. Hier ist es, was ich im Moment gemacht habe: https://jsfiddle.net/qwafkxvo/1/. Aber auf einem großen Bildschirm wird das Quadrat zu einem Rechteck, und das will ich nicht! Und das Bild passt nicht perfekt, was kann ich tun?

Danke in Beratung.

<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

Sie haben die width & die padding-bottom fix verwenden, um ansprechende Quadrate zu erstellen.

Verwenden Sie auch position: absolute, um Inhalte innerhalb Ihrer Quadrate zu platzieren.

prüfen aktualisiert Geige: https://jsfiddle.net/qwafkxvo/3/

Siehe Code:

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