Twitter Bootstrap Question posted in

Make images all same size – Twitter bootstrap

I’m trying to make circular images on a page but I wanted them to be the same size and try to keep the aspect ratio. Since they are different sizes, it looks horrible. I wanted to make them look like the yellow guy image.

MY CURRENT LAYOUT

.person {
  border: 10px solid transparent;
  margin-bottom: 25px;
  width: auto;
  height: 200px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.7;
  border-radius: 50%;
}

.person:hover {
  opacity: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container text-center">
  <div class="row">
    <div class="col-sm-4">
      <p><strong>Counter-Strike</strong></p>
      <br />
      <a href="">
        <img class="person" src="http://i.imgur.com/Zckhfao.jpg" />
      </a>
    </div>
    <div class="col-sm-4">
      <p><strong>Rainbow 6: Siege</strong></p>
      <br />
      <img class="img-circle person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
    <div class="col-sm-4">
      <p><strong>FIFA</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <p><strong>League of Legends</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
    <div class="col-sm-4">
      <p><strong>Racing</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
    <div class="col-sm-4">
      <p><strong>Battlefield</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/bFg40Dj.jpg" />
    </div>
  </div>
</div>
Tags:

3

Answers


  1. 0

    you might need to apply height:auto and max-width: 100%; to you img

    .person {
  border: 10px solid transparent;
  margin-bottom: 25px;
  width: auto;
  height: 200px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.7;
  border-radius: 50%;
}

.person:hover {
  opacity: 1;
}

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

 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container text-center">
  <div class="row myrow">
    <div class="col-sm-4">
      <p><strong>Counter-Strike</strong></p><br />
      <a [email protected]( "PC", "Gaming")>
        <img class="person" src="https://baconmockup.com/300/200/" />
      </a>
    </div>
    <div class="col-sm-4">
      <p><strong>Rainbow 6: Siege</strong></p><br />
      <img class="img-circle person" src="https://baconmockup.com/300/200/" />
    </div>
    <div class="col-sm-4">
      <p><strong>FIFA</strong></p><br />
      <img class="person" src="https://baconmockup.com/300/200/" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <p><strong>League of Legends</strong></p><br />
      <img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
    </div>
    <div class="col-sm-4">
      <p><strong>Racing</strong></p><br />
      <img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
    </div>
    <div class="col-sm-4">
      <p><strong>Battlefield</strong></p><br />
      <img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    If you want to keep your image in an img tag, you can use the object-fit property to force the image to adapt to its container. You might also need a polyfill for browser support, I suggest the lazysizes plugin.

    You might also define your images with a background-image (directly set in a style attribute, so it can be managed from the view…) and use the more supported background-size property. Some lazyload plugins (see http://jquery.eisbehr.de/lazy/example_load-background-images for instance) offer this approach with a data-src attribute.

    In both case the cover value seems, as you suggested, the right value to use with object-fit or background-size.

    Login or Signup to reply.
  3. 0

    You can add max-width: 100% and max-height: 200px for your images to preserve aspect ratio but take not more than 200px or height. Demo: 

    .person {
  border: 10px solid transparent;
  margin-bottom: 25px;
  max-width: 100%;
  max-height: 200px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.7;
  border-radius: 50%;
}

.person:hover {
  opacity: 1;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container text-center list">
  <div class="row">
    <div class="col-sm-4">
      <p><strong>Counter-Strike</strong></p>
      <br />
      <a href="">
        <img class="person" src="http://i.imgur.com/Zckhfao.jpg" />
      </a>
    </div>
    <div class="col-sm-4">
      <p><strong>Rainbow 6: Siege</strong></p>
      <br />
      <img class="img-circle person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
    <div class="col-sm-4">
      <p><strong>FIFA</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <p><strong>League of Legends</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
    <div class="col-sm-4">
      <p><strong>Racing</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
    <div class="col-sm-4">
      <p><strong>Battlefield</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/bFg40Dj.jpg" />
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search