来自 other questions在这里,我已经到了这样的地步,我可以保持图像的纵横比,将它水平和垂直地居中在容器中,并使其缩小以适合容器。快到了!!!
怎么了?我想扩展小图像,并且可以选择向 <img>
添加一个类标签即 <img class="nogrow" ... />
关闭展开小图功能。
.parent {
width: 240px;
height: 160px;
border: 1px solid black;
position: relative;
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:center;
font: 0/0 a;
}
.img-container .centerer {
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
max-height: 100%;
max-width: 100%;
}
<table>
<thead>
<th>Actual</th>
<th>Expected</th>
</thead>
<tbody>
<tr>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/1000x500" alt="" />
</div>
</div>
</td>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/1000x500" alt="" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/500x600" alt="" />
</div>
</div>
</td>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/500x600" alt="" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/50x60" alt="" />
</div>
</div>
</td>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/50x60" alt="" height="100%" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/100x50" alt="" />
</div>
</div>
</td>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/100x50" alt="" width="100%" />
</div>
</div>
</td>
</tr>
<tr>
<th colspan="2">With ".nogrow"</th>
</tr>
<tr>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img class="nogrow" src="http://placehold.it/1000x500" alt="" />
</div>
</div>
</td>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img class="nogrow" src="http://placehold.it/1000x500" alt="" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img class="nogrow" src="http://placehold.it/500x600" alt="" />
</div>
</div>
</td>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img class="nogrow" src="http://placehold.it/500x600" alt="" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img class="nogrow" src="http://placehold.it/50x60" alt="" />
</div>
</div>
</td>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img class="nogrow" src="http://placehold.it/50x60" alt="" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img class="nogrow" src="http://placehold.it/100x50" alt="" />
</div>
</div>
</td>
<td>
<div class="parent">
<div class="img-container">
<div class="centerer"></div>
<img class="nogrow" src="http://placehold.it/100x50" alt="" />
</div>
</div>
</td>
</tr>
</tbody>
</table>
最佳答案
尝试object-fit: contain
(以及none
或scale-down
for .nogrow
)。您根本不需要任何 div,只需将图像的尺寸设置为 100% x 100%。
<!DOCTYPE html>
<style>
td { width:240px; height:160px; border:1px solid }
img { width:100%; height:100%; object-fit:contain; display:block }
.nogrow { object-fit:scale-down }
</style>
<table>
<tr><td><img src="http://placehold.it/1000x500" alt="">
<tr><td><img src="http://placehold.it/500x600" alt="">
<tr><td><img src="http://placehold.it/50x60" alt="">
<tr><td><img src="http://placehold.it/100x50" alt="">
<tr><th>With ".nogrow"
<tr><td><img class="nogrow" src="http://placehold.it/50x60" alt="">
<tr><td><img class="nogrow" src="http://placehold.it/100x50" alt="">
</table>
关于html - 完美的图像容器 : Centered, 宽高比,收缩和增长以适合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38889610/