<div class="doc">
  <div class="box">
    <img src="https://nestordominguez.com/wp-content/uploads/2017/10/dinosaurios-grande.jpg" alt="Image did not load...">
  </div>
  <button class="btn">Change size</button>
</div>
*{margin: 0; padding: 0;}
.doc{
  display: flex;
  flex-flow: column wrap;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #333944;
}
.box{
  width: 300px;
  height: 300px;
  background: #CCC;
  overflow: hidden;
}
.btn{
  border: none;
  margin-top: 1.5em;
  padding: 0.75em 1.5em;
  border-radius: 3px;

  font-family: Verdana, sans-serif;
  color: white;
  background: #1ac6d0;
  cursor: pointer;
}

.box img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .box img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}
var btn = document.querySelector('.btn');
var box = document.querySelector('.box')
btn.addEventListener('click', function(){
  box.style.width = ( 100 + Math.round(Math.random()*300) ) + 'px';
  box.style.height = ( 100 + Math.round(Math.random()*300) ) + 'px';
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.