Html 是否有可能使图像尽可能小，同时仍填充其容器，并保持其纵横比？

我有一个给定大小的容器，里面有一个图像。我希望图像扩展到100%高度或100%宽度，这取决于最后一个，并且我希望它保持其纵横比，因此任何粘在容器上的东西都会被裁剪掉。如果是两边裁剪的话，我也希望它居中

所以说得很清楚，如果它是一张很宽的图片，它的高度是100%，如果它是一张很高的图片，它的宽度是100%

例如，以下是容器和图像，其大小不正确，也不居中：

.包装纸{
位置：相对位置；
左：40%；
宽度：100px；
高度：200px；
边框：1px黑色实心；
溢出：隐藏；
文本对齐：居中；
}
.图片{
位置：相对位置；
最小高度：100%；
最小宽度：100%；
高度：自动；
宽度：自动；
保证金：自动；
左：0；
右：0；
背景位置：中心；
}

---

有人知道这是否可能与CSS有关吗？

因为您有一个固定大小的包装器，而且

对象适合度

没有很好的浏览器支持，我建议您在包装器上使用

背景

/

背景大小

现在，通过设置它的位置，您可以控制它的裁剪位置。在下面的示例中，我使用了

左上

，这意味着它将在右/下进行裁剪，而在您的示例中，您可能需要

居中

，它将根据两个溢出中的哪一个来平均裁剪上/下或左/右

根据评论更新

还可以在标记中设置图像源，就像使用

img

一样，这里通过设置

背景图像：url（）

内联来完成

.wrapper{
位置：相对位置；
左：40%；
宽度：100px；
高度：200px；
边框：1px黑色实心；
溢出：隐藏；
文本对齐：居中；
背景重复：无重复；
背景位置：左上；
背景尺寸：封面；
}

---

这是可能的，但您必须事先知道纵横比，知道这一点，您可以为图像保留空间

div{
宽度：100%；
溢出：隐藏；
位置：相对位置；
}
div：：之后{
填充顶部：56.25%；/*包含块的百分比_宽度*/
显示：块；
内容：''；
}
部门经理{
显示：块；
宽度：100%；
高度：自动；
位置：绝对位置；
顶部：-9999px；
底部：-9999px；
左：-9999px；
右：-9999px；
保证金：自动；
}

---

如果将图像定义为背景图像，则可以使用

背景大小：contain

-这就是您想要的：

.wrapper{
位置：相对位置；
左：40%；
宽度：100px；
高度：200px；
边框：1px黑色实心；
背景：url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG）无重复中心；
背景尺寸：包含；
}

试试这个

垂直

.picture {
      position: relative;
      height: 100%;
      width: auto;
      margin: auto;
      left: 0;
      right: 0;
      background-position: center;
    }

.picture {
      position: relative;
      width: 100%;
      height: auto;
      margin: auto;
      left: 0;
      right: 0;
      background-position: center;
    }

水平

.picture {
      position: relative;
      height: 100%;
      width: auto;
      margin: auto;
      left: 0;
      right: 0;
      background-position: center;
    }

.picture {
      position: relative;
      width: 100%;
      height: auto;
      margin: auto;
      left: 0;
      right: 0;
      background-position: center;
    }

---

请添加高度属性“自动”和图像宽度（百分比%），在此属性中，您可以管理纵横比

width:50%, 
height:auto,

---

这是一个很好的解决方案，唯一的问题是图片是动态加载的，我认为不可能将图像动态加载到CSS中。@JoeMorano没问题。。。将在一周内更新我的答案sec@JoeMorano更新了一个解决方案that@LGSon啊，我看到了你的答案，但它看起来比我想象的要复杂得多（只需比较一下你和我答案中的金额代码（？）如果你阅读我答案下面OP的评论，你就会明白为什么。。。我保留了OP的示例代码（现在将删除它，这样就不会让更多的用户感到困惑），如果您仍然打算保留您的答案，OP要求尽可能小，同时仍然填充其容器，这意味着

覆盖
，而不是
包含
。
@ah-您知道，我们的答案之间还有另一个区别！我认为这实际上需要
包含
，而不是
封面
。我们来看看OP会怎么说……你也错过了吗，所以任何粘在容器上的东西都被剪掉了。。。你还认为它是
包含
？