CODEWITHSUNDEEP
csstwitter-bootstrap
user9013959
user9013959

Reputation:

Make image all the same size

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

Upvotes: 0

Views: 2966

Answers (6)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

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>

Upvotes: 1

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

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.

Upvotes: 0

Varun
Varun

Reputation: 1

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>

Upvotes: 0

Narxx
Narxx

Reputation: 8309

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

Upvotes: 1

Znaneswar
Znaneswar

Reputation: 3387

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

Upvotes: 0

BENARD Patrick
BENARD Patrick

Reputation: 31005

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

Upvotes: 0

Related Questions