请求有关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

此选项将尝试显示图像中间部分的裁剪视图。这假设用户将上载在任何维度上不长的图像。如果您的用户可以上传非常宽但短的图片，这将无法正常工作。此外，图像的一部分将被裁剪掉......总是。

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

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