Make images all same size - html

Question

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

Answer 1

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 href=#Url.Action( "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>

Answer 2

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.

Answer 3

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>