Display full image in a box - html

Question

I have an input that when selecting an image it fills all this box ...
In order to completely fill this box I used 100% height and width ... in fact the image occupies the entire box, but not all of its details are visible.
Is there any way to get the image to occupy 100% but in which all your content is visible?
My problem:
Original Image
Picture inside the box (What I have)
As you can see, the image occupies the whole box (it's correct) but the problem is that the full image doesn't appear :(
Any solution?
Thanks!
My code and test
HTML
<div class="drop">
<div class="cont" *ngIf="urls.length === 0">
<div class="browse" >
Upload files
</div>
</div>
<div *ngIf="urls.length > 0">
<img [src]="urls[0]">
</div>
<input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
</div>
css
.drop {
margin-left: 32px;
width: 928px;
height: 696px;
border-radius: 15px;
overflow: hidden;
text-align: center;
background: white;
/* margin: auto; */
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
/*&:hover
cursor: pointer
background: #f5f5f5*/;
}
.drop .cont {
width: 500px;
height: 170px;
color: #8E99A5;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.drop .cont i {
font-size: 400%;
color: #8E99A5;
position: relative;
}
.drop .cont .browse {
margin: 10px 25%;
padding: 8px 16px;
border-radius: 16px;
background: #ECF2F9;
text-align: center;
font: Bold 13px/20px Noto Sans;
letter-spacing: 0;
color: #4D4F5C;
}
.drop input {
width: 928px;
height: 650px;
cursor: pointer;
background: red;
opacity: 0;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#list {
width: 100%;
text-align: left;
position: absolute;
left: 0;
top: 0;
}
#list .thumb {
height: 100%;
margin: 10px 5px 0 0;
}
img {
width: 100% !important;
height: 100% !important;
}

Answer 1

It's because your giving a fixed height to the parent container, what you have to add is this:
.drop{
box-sizing: border-box;
}
.drop>img{
width: 100%;
height: auto;
}

Answer 2

It's because of this line:
.drop {
overflow: hidden;
}
If you change it to overflow: visible/scroll it will work.
If you don't want the image to scroll you could edit the css like this:
img {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
}

Answer 3

I updated. Try this.
img {
height: 100% !important;
}
.abc {
width: 100% !important;
height: 100% !important;
}
<div class="abc" *ngIf="urls.length > 0">
<img [src]="urls[0]">
</div>