Image cropped inside div. How to maintain original aspect - html

Question

I am editing a websites original theme, and have presently run into an image that is cropped vertically inside a div
See codepen or example below: https://codepen.io/hioioasd90/pen/LzvmpW
I would like for this image to display in its entirety, but be scaled to the outside containers set width.
After editing the chrome console, changing height: 27vh; to a larger number will result in the image showing more inside the div, however it beings to go beyond the boundaries of the max width.
.container {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.img-cover-category {
background: none no-repeat center center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
}
<div class="container">
<div class="img-cover-category" style="background-image: url(https://writernikhilpro01.files.wordpress.com/2015/08/unsplash-laptop-desk.jpg);"></div>
</div>

Answer 1

Depending what you would like to achieve, first you could delete doubled:
background-size: cover; // this is doubled in the css code
and add:
background-size: contain; // new version for every browser
And from this point try to adjust the size of the image.
Here is what you can delete:
.img-cover-category {
background: none no-repeat center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
}
And paste this instead:
.img-cover-category {
background: none no-repeat center;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
margin-bottom: 0px;
}
Then if the scaling should leave the image fixed to the top and not center in the middle you can change this:
background: none no-repeat top;
ADJUSTMENT TO NEW SITUATION vesrion A
Instead of adjusting height of the image set a height of the container
.container {
max-width: 1000px;
height: 1000px;
margin: 0 auto;
position: relative;
border: 1px;
border-color: #000;
border-width: 1px;
border-style: solid;
}
.img-cover-category {
background: none no-repeat top;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
position: relative;
z-index: 0;
padding: 0;
height: 100%;
width: 100%; /* Currently this seems to be obsolete */
margin-bottom: 0px;
}
Also adding min-height: lets say 1000px to the .img-cover-category seems make the background visible aswell...
To be honest I don't know what this will be a header, a background - maybe you could add a normal image instead of background.... if you want it to be visible all the time...