CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive
Everchist84
Everchist84

Reputation: 59

Square grid responsive

I want have some divs with image and input inside I want to have this divs responsive and the image to be perfect fit and to remain in box. Here it's what I've done for the moment: https://jsfiddle.net/qwafkxvo/1/. But on large screen the square become rectangle, and I don't want that! And the image is not perfect fit, what can I do?

Thanks in advice.

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

Upvotes: 1

Views: 102

Answers (1)

nashcheez
nashcheez

Reputation: 5183

You have to use the width & the padding-bottom fix to create responsive squares.

Also use position: absolute to place content inside your squares.

Check updated fiddle: https://jsfiddle.net/qwafkxvo/3/

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

Upvotes: 1

Related Questions