Показать полное изображение в коробке

Question

У меня есть ввод, что при выборе изображения оно заполняет все это поле ... Для того, чтобы полностью заполнить это поле, я использовал 100% высоту и ширину ... фактически изображение занимает весь ящик, но не всеего детали видны.

Есть ли способ заставить изображение занимать 100%, но при котором виден весь ваш контент?

Моя проблема:

Исходное изображение

Изображение внутри коробки (Что у меня есть)

Как вы можете видеть, изображение занимает весь блок (это правильно), но проблема в том, что полное изображение не появляется: (

Любое решение?

Спасибо!

Мой код и тест

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

Это из-за этой строки:

.drop {
overflow: hidden;
}

Если вы измените его на overflow: visible/scroll, оно будет работать. Если вы не хотите, чтобы изображение прокручивалось, вы можете отредактировать CSS следующим образом:

img {
   width: auto;
   height: auto;
   max-height: 100%;
   max-width: 100%;
}

Answer 2

Это потому, что вы задаете фиксированную высоту для родительского контейнера, вам нужно добавить следующее:

.drop{ 
box-sizing: border-box;
}

.drop>img{
width: 100%;
height: auto;
}

Answer 3

я обновил. Попробуйте это.

 img {
    height: 100% !important;
}

   .abc {
   width: 100% !important;
    height: 100% !important;
}

<div class="abc" *ngIf="urls.length > 0">
      <img [src]="urls[0]">
    </div>