我想以固定大小（100 像素 x 100 像素）的 div 显示任何大小（不同的宽度和高度）的图像，而不改变其纵横比。我还想将图像与 div 内的中心对齐。我做了它，但除非我改变它的纵横比，否则具有不同宽度和高度（第 6 个）的图像不会居中。
<html>
<style>
.A{
border:1px dotted black;
display:inline-block;
}
.B{
border:1px solid black;
display:inline-block;
width: 100px;
height:100px;
overflow:hidden;
}
.C{
border:1px solid black;
display:inline-block;
width: 100px;
height:100px;
overflow:hidden;
}
</style>
1
<div class="A">
<img src="man-profile.png">
</div>
2
<div class="B">
<img src="man-profile.png">
</div>
3
<div class="B">
<img src="man-profile.png" style="width:100;">
</div>
4
<div class="C">
<img src="picture.png" style="width:100;">
</div>
5
<div class="C">
<img src="picture.png" style="height:100;">
</div>
6
<div class="C">
<img src="picture.png" style="height:100; width:100%"> …我正在尝试使用添加一个类
<span id="sp1">：
document.getElementById("sp1").classList.add("fa fa-hand-rock-o");
但是显示错误：
字符串包含无效字符