.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;
}
答案 0 :(得分：1)
您的属性height: 50px;正被引导程序的.img-responsive属性覆盖，并提供height: auto;。在代码中使用更高的特异性，或者只是在bootstrap css之后加载样式，给出相同的规则。
为了证明我的情况，请将属性更改为height: 50px !important;并查看确实有效。我不是说使用!important这是一个好习惯，它只是一种快速的方式向您展示这是一个特殊性问题......
答案 1 :(得分：1)
请尝试代码段：
.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>
答案 2 :(得分：0)
只需将!important添加到您的css：
<强> CSS ：
.table-img {
height: 50px !important;
display: block;
margin-left: auto;
margin-right: auto;
}
因为这个值是img-responsive类的过度...
答案 3 :(得分：0)
添加.table-img {
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
}
以使其成为循环
.img-rounded {
border-radius: 50%!important;
height: 30px;
}
或
$search = new Elastica\Search($client);
$search->addIndex('dog')->addIndex('cat');
try {
$searchResponse = $search->search($q);
return $searchResponse->getResults();
} catch (ResponseException $exception) {
return [];
}
答案 4 :(得分：0)
样式表类定义
.table-img {
height: 50px;
width : 50px;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
然后像这样调用html文件
<table>
<tr><td>
<img class='table-img' src='yourimage.jpg' />
</td></tr>
</table>
答案 5 :(得分：0)
如果保持img元素包装在包含元素中，如下面的嵌入式代码段所示。
代码段示范：
.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>
明显的缺点是横向定向图像比纵向图像更好地支持，但根据您的情况，这可能是微不足道的。