使用下面的CSS设置之一:最流行的是包含或覆盖

.my-img {
  object-fit: contain;
}

or

.my-img {
  object-fit: cover;
}

添加边缘对齐图像:

因为我们希望图像是左对齐的，我们添加了:

img {
  margin-right: auto;
}

类似地，对于右对齐的图像，我们可以添加margin-right: auto;。这段代码显示了两种对齐类型的演示。

祝你好运…

div { 显示:flex; flex-direction:列; 边框:2px黑色实心; ｝ h1 { text-align:中心; ｝ 人力资源{ 边框:1px黑色实心; 宽度:100% ｝ img。一个{ margin-right:汽车; ｝ img。两个{ margin-left:汽车; ｝ < div > <标题> Flex框< / h1 > <人力资源/ > <img src="https://via.placeholder.com/80x80" class="one" /> <img src="https://via.placeholder.com/80x80" class="two" /> <人力资源/ > < / div >

我有一个类似的问题，我的解决方案是添加伸缩:0;到图像。

我在制作导航栏时也遇到了类似的问题，但上面的方法都不适合我。

我的解决方案是为图像增加高度:100%。

如果你要水平对齐，添加宽度:100%。

编辑:Chrome似乎默认添加这个值，但你需要添加这个兼容性。

我在Foundation菜单上也遇到了同样的问题。align-self:中心;对我没用。

我的解决方案是用<div style="display: inline-table;">

它是拉伸的，因为align-self的默认值是拉伸。 这种情况有两种解决方案: 1. 设置img align-self: center 或 2. 设置父align-items: center

img {

   align-self: center
}

OR

.parent {
  align-items: center
}