css - 请求有关 div 中图像的视觉解决方案

Question

我有以下图片:

问题是这看起来像废话。
什么是最常见的 (CSS) 解决方案来实现更好的视觉匹配？
我会尝试自己编写代码，但也欢迎提供代码。

我想允许组织者上传任何大小(但在最大文件大小范围内)。
原因是用户可以单击图像以将其最大化到原始尺寸，所以我不想限制上传任何尺寸(宽度/高度)的可能性。

Answer 1

选项1

此选项会产生一些不稳定的图像，但用户会看到 100% 的图像，并且每张图像的大小都相同。

.image-wrap {
    border: 1px solid black;
    width: 200px;
    height: 200px;
}

.image-wrap img {
    width: 100%;
    height: 100%
}

选项 2

此选项将根据图像的高度生成可变高度的框，但不会出现图像失真 - 所有框的宽度都相同。

.image-wrap {
    border: 1px solid black;
    width: 200px;
    height: auto;
}

.image-wrap img {
    width: 100%;
}

选项3

此选项将尝试显示图像中间部分的裁剪 View 。这假设用户将上传在任何维度上都不是很长的图像。如果您的用户可以上传非常宽但很短的图像，这将不起作用。此外，图像的一部分将被裁剪掉……总是。

.image-wrap {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.image-wrap img {
    width: 140%;
    margin-left: -20%;
    margin-top: -10%;
}