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>

我试图让我的图像看起来像这样:http://designcollection.in/codecanyon/table-record/table-design-7.html?ref=designcollection

但到目前为止，我已经设法使所有图像大小相同。用户可以输入任何图像尺寸我只想使图像大小相同且四舍五入。

https://i.gyazo.com/4eb460be09fea8e0eef939fb9ae4bb0f.png

我正在使用 bootstrap 并尝试了这个 css:

.table-img {
  height: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Answer 1

您的属性 height: 50px; 正在被 bootstrap 的 .img-responsive 属性覆盖，给出 height: auto;。要么在你的代码中使用更高的特异性，要么简单地在 Bootstrap css 之后加载你的样式，给出相同的规则。

为了证明我的情况，将属性更改为 height: 50px !important; 并看到它确实有效。我并不是说使用 !important 是个好习惯，它只是向您展示这是一个特殊问题的快速方法...