Question

用户可以上传在UI中的方形容器中显示的图像。问题是他们可以上传任何大小的图像，因此它们可能是小的，纵向的，横向的或一些奇数长宽比。图像应始终填充容器并进行中心定位。

我想设置这些图像的样式，以便较小的尺寸始终具有指定的尺寸，同时保持纵横比不变。

假设我希望我的图像的结果尺寸为50px（应该更小）：

我希望我的图片在任一维度上至少 50px。使用max-width和max-height调整图片大小最多 50px ...

原始解决方案的要求

我尝试过使用max- 尺寸样式但是使用它我总能控制一个维度。我想同时控制两者。

<计划B解决方案的要求

原始解决方案可能会限制其要求过多。在这种情况下，我将使用this question中描述的CSS背景。问题是我的图像在设计时没有定义，而是在运行时由于用户正在选择图像而我在使用FileAPI进行上传到服务器之前显示它们。这需要我定义内联样式，我希望避免这种情况。

Answer 1

尝试使用此css进行图片标记：

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

在这种情况下，您可以根据需要设置纵向和横向图像（保持纵横比）。但只有Square保持100 * 100。 here is a fiddle。

Answer 2

产生的解决方案

不幸的是仅使用CSS 直接调整图片大小是不可能的。对于图像，我的意思是IMG元素。元素背景图像另外支持此功能。 IMG元素在这方面没有什么不同，所以我们实际上也可以设置它们的背景。因此，我的图像显示透明图像，背景设置为应显示的图像。

img {
    height: 50px;
    width: 50px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

我使用内联CSS以编程方式设置背景图像，因为图像是使用本地文件系统中的FileAPI读取的，我使用数据URI 将它们设置为背景。

作品...