image - 根据父宽度/高度 CSS HTML 自动调整 img 宽度/高度

Question

我正在尝试用图像填充窗口。我正在使用 CSS 来尝试解决这个问题，但我想知道是否有一种方法可以最大化图像的宽度/高度，直到所有空白区域都被填满，但又不会破坏质量。

<div class='rel-img-cont'>
    <img src='src.jpg' />
</div>

.rel-img-cont
{
    width: 100px; height: 100px; overflow: hidden;
}
.rel-img-cont img
{
    height: 100px; margin:0 0 0 0;
}

如何填充空白区域，这样即使其中一个尺寸溢出，它也最多只能达到 100 像素。

有没有办法做到这一点，即使原始图像是 100px x 100px 或 150px x 200px，无论哪一个，100px 都是最大的，所以其中一方必须让出。

谢谢

Answer 1

使用我机器上测试过的代码

 <style>
 .rel-img-cont
{
    width: 10%; height: 10%; overflow: hidden;
    border:3px solid orange;
}
.rel-img-cont img
{
    height: 100%; margin:0 0 0 0;
    width:100%;
}
 </style>