如何在固定大小的div内放置图像而不使图像失真？

Question

是否有一种方法可以将图像固定在固定尺寸的div中而不拉伸？

我拥有的图像不能超过横向或纵向，以适合250px的div，问题是真正拉伸了。

实际图像尺寸：

当前结果：

这是我的代码：

.container {
position: relative;
width: 250px;
height: 250px;
margin-bottom: 30px;
}

.container img {
width: 100%;
height: auto;
}

<div class="row text-center text-lg-left">
                        <div th:each="inst, iStat : ${instances}" class="container"
                            th:if="${inst.fileStatus} eq ${T(br.com.macrosul.stetho.entity.FileStatus).UPLOADED}">
                            <a href="#" class="d-block mb-4 h-100"> <img class="img"
                                data-target="#showMedia" data-toggle="modal"
                                th:data-slide-to="${iStat.index}"
                                style="width: 100%; height: 100%"
                                th:src="@{'/instances/' + ${inst.id} + '/thumbnail' + ${folder != null ? '?folder=' + folder.id : ''}}"
                                alt="">
                            </a>
                        </div>
                    </div>

Answer 1

尝试“对象适合：封面；”在.Container上img

Answer 2

不要在图像标签上指定明确的宽度或高度。改给它

max-width:100%;
max-height:100%;

如果只想指定宽度，也可以选择height: auto;套用

所以我在这里有两个图片的示例

img {
    max-width: 100%;
    max-height: 100%;
}


.square_little {
    height: 40px;
    width: 40px;
}

.square_big {
    height: 200px;
    width: 200px;
}

Square Div 40px x 40px
<div class="square_little">
    <img src="https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png">
</div>

Square Div 200px x 200px
<div class="square_big">
    <img src="https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png">
</div>

我也希望对您有用...