CODEWITHSUNDEEP
jqueryhtmlcss
Jack Hales
Jack Hales

Reputation: 1654

Set image height same as width

I have a image that is being displayed mulitple times, the image is being taken and has random heights.

I have set it up so that the images are displayed using 37.5% of the parent div.

This has worked fine till I started to get irregular heights for the divs cause the height was not given. I have tried to set the height to 37.5% although that manages to get a completely different value in pixels as the width gets.

I am just wanting to make the images perfect boxes without setting a hard pixel value or any other type of value.

Current CSS

/* Doesn't work. */
width: 37.5%;

float: left;
margin-left: 6.25%;
margin-right: 6.25%;
margin-bottom: 6.25%;

HTML Image Being Edited

<img src="LINK" />
<!-- Gets edited using ^ CSS. -->

Note: jQuery is allowed.

Upvotes: 0

Views: 308

Answers (1)

Asons
Asons

Reputation: 87292

Here is 2 samples, where parent2's children have background-image: cover, which will keep the image's ratio rather than stretch it, which first sample does.

.parent,
.parent2 {
  width: 60%;
  overflow: auto;
  margin-bottom: 10px;
}

.child {
  float: left;
  width: 37.5%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
  .parent2 .child {
    background-size: cover;
  }

.child:after {
  padding-top: 100%;  /* 1:1 ratio = perfect square */
  display: block;
  content: '';
}
.child.nr1 {
  background-image: url(http://lorempixel.com/200/400/animals);
}
.child.nr2 {
  background-image: url(http://lorempixel.com/400/200/animals);
}
.child.nr3 {
  background-image: url(http://lorempixel.com/300/300/animals);
}
<div class="parent">
  <div class="child nr1"></div>
  <div class="child nr2"></div>
  <div class="child nr3"></div>
</div>

<div class="parent2">
  <div class="child nr1"></div>
  <div class="child nr2"></div>
  <div class="child nr3"></div>
</div>

When using the img one set the image source/path in the markup, this can be done using a div as well, it that is required, like this

.parent,
.parent2 {
  width: 60%;
  overflow: auto;
  margin-bottom: 10px;
}

.child {
  float: left;
  width: 37.5%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
  .parent2 .child {
    background-size: cover;
  }

.child:after {
  padding-top: 100%;  /* 1:1 ratio = perfect square */
  display: block;
  content: '';
}
<div class="parent">
  <div class="child" style='background-image: url(http://lorempixel.com/200/400/animals);'
></div>
  <div class="child" style='background-image: url(http://lorempixel.com/400/200/animals);'
></div>
  <div class="child" style='background-image: url(http://lorempixel.com/300/300/animals);'
></div>
</div>

<div class="parent2">
  <div class="child" style='background-image: url(http://lorempixel.com/200/400/animals);'
></div>
  <div class="child" style='background-image: url(http://lorempixel.com/400/200/animals);'
></div>
  <div class="child" style='background-image: url(http://lorempixel.com/300/300/animals);'
></div>
</div>

Upvotes: 1

Related Questions