CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Pierre Olivier Tran
Pierre Olivier Tran

Reputation: 1879

col-sm-4 height bootstrap

I'm using bootstrap to display a set of sm-4 divs. Each of these includes a panel, which header contains an image. These images got variable sizes,however, I would like to get these columns to share the same height. Is it possible ?

So far, this is the html

<div class="row">
                            <a href="/app_dev.php/fly/50" class="fly_a">
      <div class="col-sm-4 flycard">
        <div class="panel panel-default unpan">
          <div class="panel-body planepi">
                  <img src="/Planes/AAT3.jpg" class="img_responsive" width="100%">

          </div>
          <div class="panel-footer">
          <h4>Falaise - Dieppe</h4>

              <p>3 places</p>
          </div>
        </div>
      </div>
      </a>
                                  <a href="/app_dev.php/fly/48" class="fly_a">
      <div class="col-sm-4 flycard">
        <div class="panel panel-default unpan">
          <div class="panel-body planepi">
                  <img src="/Planes/BE36.jpg" class="img_responsive" width="100%">

          </div>
          <div class="panel-footer">
          <h4>Bordeaux - Toulouse</h4>

              <p>1 place</p>
          </div>
        </div>
      </div>
      </a>
                                  <a href="/app_dev.php/fly/46" class="fly_a">
      <div class="col-sm-4 flycard">
        <div class="panel panel-default unpan">
          <div class="panel-body planepi">
                  <img src="/Planes/DA20.jpg" class="img_responsive" width="100%">

          </div>
          <div class="panel-footer">
          <h4>Flers - Pontoise</h4>

              <p>1 place</p>
          </div>
        </div>
      </div>
      </a>
    </div>

Here's the CSS (This is what I tried so far)

.flycard
{
text-align:                     left;
}
// EDIT : ADD THIS TO SOLVE THE PROBLEM
.planepi
{
    max-height:                     200px;
    min-height:                     200px;
    overflow: hidden;
    height:                         100%;
    width:                          100%;
}

.planepi img
{
    max-width:100%;
    max-height:100%;
}

And, here's the resultPlane pictures should be the same height, even if it has to overflow a bit

Upvotes: 0

Views: 1139

Answers (2)

ccdiego5
ccdiego5

Reputation: 666

CSS Units

CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc. Length is a number followed by a length unit, such as 10px, 2em, etc.

A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted for some CSS properties, negative lengths are allowed There are two types of length units: relative and absolute.

w3schools css units

.planepi {
  min-height: 30vh;
  height: 30vh;
  max-height: 30vh;
  overflow: hidden;
}

vh Relative to 1% of the height of the viewport

Upvotes: 1

brance
brance

Reputation: 1178

For anyone with the same problem, you need to specify the max-height of the div that holds the image:

.planepi {
  max-height: 200px; //this is the max height you want
  overflow: hidden; //everything that goes bellow 200px will be hidden
}

Of course it is easier for you to prepare the images to be in the same height, but this will work.

Upvotes: 0

Related Questions