Make image all the same size - css

Question

.table-img {
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table center-aligned-table table-striped" id="dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th class="text-center text-primary">Image</th>
<th class="text-center text-primary">Name</th>
<th class="text-center text-primary">Username</th>
<th class="text-center text-primary">Permissions</th>
<th class="text-center text-primary">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td><img class="img-responsive img-rounded table-img" src="data:image/png;base64, null"></td>
<td>John Smith</td>
<td>admin</td>
<td>Administrator</td>
<td><label class="badge badge-success">Online</label></td>
</tr>
<tr class="text-center">
<td><img class="img-responsive img-rounded table-img" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" ></td>
<td>asdajdaslf</td>
<td>admin50</td>
<td>Administrator</td>
<td><label class="badge badge-danger">Offline</label></td>
</tr>
</tbody>
</table>
I'm trying to make my images look like this: http://designcollection.in/codecanyon/table-record/table-design-7.html?ref=designcollection
But so far I've managed to make the images all the same size. The user can input any image size I just want to make the image all the same size and rounded.
https://i.gyazo.com/4eb460be09fea8e0eef939fb9ae4bb0f.png
I'm using bootstrap and I tried this css:
.table-img {
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
}

Answer 1

Your property height: 50px; is being override by bootstrap's .img-responsive property, giving height: auto;. Either use a higher specificity in your code, or simply load your styles after the bootstrap css, giving the same rules.
To prove my case, change the property to height: 50px !important; and see that is does work. I'm not saying it's a good practice to use !important, it's just a quick way to show you that it's a specificity issue...

Answer 2

Please try snippet code:
.table .table-img {
width: 50px;
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table center-aligned-table table-striped" id="dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th class="text-center text-primary">Image</th>
<th class="text-center text-primary">Name</th>
<th class="text-center text-primary">Username</th>
<th class="text-center text-primary">Permissions</th>
<th class="text-center text-primary">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td><img class="img-responsive img-rounded table-img" src="data:image/png;base64, null"></td>
<td>John Smith</td>
<td>admin</td>
<td>Administrator</td>
<td><label class="badge badge-success">Online</label></td>
</tr>
<tr class="text-center">
<td><img class="img-responsive img-rounded table-img" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" ></td>
<td>asdajdaslf</td>
<td>admin50</td>
<td>Administrator</td>
<td><label class="badge badge-danger">Offline</label></td>
</tr>
</tbody>
</table>

Answer 3

If maintaining image aspect ratio is important, consider wrapping the img element in a containing element as demonstrated in the embedded code snippet below.
Code Snippet Demonstration:
.table-img {
height: 50px;
width: 50px;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 100%;
}
.table-img img {
max-height: 50px;
max-width: none;
min-width: 100%;
min-height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table center-aligned-table table-striped" id="dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th class="text-center text-primary">Image</th>
<th class="text-center text-primary">Name</th>
<th class="text-center text-primary">Username</th>
<th class="text-center text-primary">Permissions</th>
<th class="text-center text-primary">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td><img class="img-responsive img-rounded table-img" src="data:image/png;base64, null"></td>
<td>John Smith</td>
<td>admin</td>
<td>Administrator</td>
<td><label class="badge badge-success">Online</label></td>
</tr>
<tr class="text-center">
<td>
<div class="table-img"> <!-- new containing element to wrap img -->
<img class="img-responsive img-rounded" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg">
</div>
</td>
<td>asdajdaslf</td>
<td>admin50</td>
<td>Administrator</td>
<td><label class="badge badge-danger">Offline</label></td>
</tr>
</tbody>
</table>
The obvious drawback to this being that landscape orientated images will be better supported than portrait orientated images, but depending on your situation, that may be negligible.

Answer 4

Just add !important to your css:
CSS:
.table-img {
height: 50px !important;
display: block;
margin-left: auto;
margin-right: auto;
}
Because this value is overiden by img-responsive class...

Answer 5

add border-radius: 50%; to make it circular
.table-img {
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
}
or
.img-rounded {
border-radius: 50%!important;
height: 30px;
}

Answer 6

style sheet class definition
.table-img {
height: 50px;
width : 50px;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
then call in html file like this
<table>
<tr><td>
<img class='table-img' src='yourimage.jpg' />
</td></tr>
</table>