css 最小宽度变换

Question

我有一个 div 上面有通过上传完成的图像。在我们上传差异图像尺寸之前，它运行良好。当他们上传了一张非常大的图片并且它被截断（隐藏溢出的原因）并且只显示图片的某个部分时出现了问题，但是如果我删除 overflow: hidden, 它变得太大了。所以我放了一个 transform(.20, .20) 效果很好，但是当用户上传一个小尺寸的图像时，它会因为变换而变得非常小，这是我不喜欢的。我想放一个最小宽度或类似条件变换，如果图像低于 400px，则不要变换它，或者变换但不小于 400px 方形 img。那可能吗？我在几个部分设置了最小宽度，但没有任何效果。

这是我的 css & div:

.upload-viewer {
    /* 
    border: 1px solid #e0246f;*/
    margin-left: -199px;
    height: 188px;
    text-align: center;
    background-color: #eee;
    border: solid 1px #ddd;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 4px 5px;
    transform: scale(.20, .20);
    position: relative;
    top: -70px;
    margin-bottom: 50px;
}


 <div class="upload-viewer">
                <img src="" />
            </div>

Answer 1

尝试使用 `max-width`

您可以在 img 标签中设置 max-width 道具

例如：

.upload-viewer img {
    max-width: 400px;
}

这样，如果图片宽度小于 400px，它不会改变你的图片宽度，但会限制在这个宽度。

Answer 2

最小宽度设置您应该将图像宽度设置为 100% 的最小宽度像这样

.upload-viewer img{
  width:100%;
}

css 最小宽度变换

css transform with min-width

css

css-transforms

尝试使用 `max-width`

css 最小宽度变换

css transform with min-width

css

css-transforms

尝试使用 max-width

尝试使用 `max-width`