css transform with min-width

Question

I have a div that has image on it done by uploading. It is quite working well until we uploaded diff image sizes. Problem came up when they uploaded a very big image and it is being cutoff (coz of overflow hidden) and just shows like a certain portion of the image, but if i remove the overflow: hidden, it becomes way too big. So then I put a transform(.20, .20) which worked well, but when user uploads a small sized image, it becomes really small because of the transform, which I don't like. I would like to put a min-width or like a conditional transform that if image is below 400px, don't transform it, or transform but not smaller as 400px square img. is that possible? I put min-width on several parts but nothing works.

here is my 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

Min width sets the minimum width you should set the image width to 100% Like this

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