使用object-fit：scale-down后是否有方法删除不必要的空白空间？

Question

在用户可以另外指定其图像的宽度或高度的情况下，我正在处理用户上传（或具体链接到）的图像。我仍然需要确保在最终输出中保留比率，因此我定义了max-height和max-width，并使用object-fit:scale-down避免了挤压。

[现在，我知道在大多数情况下，最好只定义max-width或max-height，而不是同时定义两者，而在另一些情况下，最好将object-fit:cover与width的100％一起使用，并且只定义[ C0]。在我的特定情况下，这不会为我解决问题，所以我需要选择height。这就是我所得到的（简体）：

HTML：

object-fit:scale-down

请注意，上面的700px宽度是由上传图片的用户定义的，因此我无法更改此部分。永不过时，它会按比例缩小，因为...

CSS：

<div>
<img src="https://www.kidsmathgamesonline.com/images/pictures/shapes/circle.jpg" class="uploaded_picture" style="width: 700px">
</div>

因此，这在大多数情况下都可以正常工作，但是图像的副作用是为该区域保留了空白空间，否则该空白区域将被其占据，但由于缩放而未被占用。下图显示了它。白色背景和圆圈是实际按比例缩小的图像。蓝色叠加层是整个占用空间（500px）：

.uploaded_picture {
    max-width: 500px;
    max-height: 200px;
    object-fit: scale-down;
}

不是填充或边距，而是按比例缩小的图像本身占用的空间：

我的问题很简单，即使解决方案可能不是：我能以某种方式摆脱双方未使用的空间，以便可以被其他元素占用吗？

Answer 1

我相信，只要您的用户能够选择其上载的宽度，那么如果他们选择相等或更大的值，则至少必须处理那些500px。没有CSS规则可以帮助您。如您在检查时所看到的，由于用户选择了700像素，因此图像采用了最大宽度。

是不是 CSS问题，是图像处理问题。您将需要使用上传脚本。