Make image all the same size

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;
}

U dont see the images from my print screen? It looks awful. All different sizes and not round at all. Compare to the site I gave pls — , Nov 27 '17 at 12:07
The thing is: You never asked a question. You said, you want them the same size and rounded, both of which were true for your example. (former, you at least claimed to be working, there is still only one image in the example We are not gonna tell you what is going to be prettier, but help you with a bug/ problem. — SourceOverflow, Nov 27 '17 at 18:01

score 1 · Answer 1 · answered Nov 27 '17 at 12:09

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

answered Nov 27 '17 at 12:09

Narxx

7,929
5
26
34

It is the specificity issue aptly described by @Narxx. !important is a quick fix. – PRAKASH THOMAS VARGHESE Nov 27 '17 at 12:38

score 1 · Answer 2 · edited Nov 29 '17 at 03:28

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>

score 0 · Answer 3 · answered Nov 27 '17 at 12:07

0

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

answered Nov 27 '17 at 12:07

BENARD Patrick

30,363
16
99
105

Using `!important` is bad practice. Better use the same property in local style sheet to override that rule. – Narxx Nov 27 '17 at 12:09
@Narxx Maybe your comment is a bit subjective ... Please read this : https://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-css-property – BENARD Patrick Nov 27 '17 at 12:15
In the area between suggesting `!important` as the solution to the question, and saying that using `!important` is bad practice, I'd rather take the more cautious approach and not recommending dangerous things that will get him in trouble later, if he doesn't understand the consequences. – Narxx Nov 27 '17 at 14:33
@Narxx Ok, maybe you use to work on single little projects. Imagine that you work on a multisite website where multiple styles may be affected to one view, so the fact to insert this style on html, limit every other styles. Maybe you should write less than you can think. – BENARD Patrick Nov 28 '17 at 07:34
You assume a lot about me and my experience. This is irrelevant for this thread. I'll be happy to continue this discussion in private. – Narxx Nov 29 '17 at 07:44
@Narxx You're Welcome, I can invite you 3 days in France. – BENARD Patrick Nov 29 '17 at 07:52

score 0 · Answer 4 · answered Nov 27 '17 at 12:08

0

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;
}

answered Nov 27 '17 at 12:08

Znaneswar

3,329
2
16
24

score 0 · Answer 5 · answered Nov 27 '17 at 12:10

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>

UncaughtTypeError · Accepted Answer · 2017-11-27T12:50:13.343

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.

Make image all the same size

6 Answers6