Responsive content with height limited to screen size - html

Question

For the last couple of days I am working in a simple step by step tutorial layout (html/css), and I cannot make it responsive and limited to screen size at same time.
Here is what I have so far and what I am trying to do:
HTML:
<div id="tutorial">
<h1>Step 2 - Title</h1>
<h3>Second step description / instructions</h3>
<div id="content">
<div id="ctrls">
<img src="images/prev.png">
<img src="images/stop.png">
<img src="images/next.png">
</div>
<div id="image">
<img src="images/step2.jpg">
</div>
</div>
<div id="controls">
<div class="btn prev">
<img src="images/btn_prev.png">
<div class="btn next">
<img src="images/btn_next.png">
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
overflow: hidden;
font-family: Arial;
}
#tutorial {
width: 100%;
height: 100vh;
background-color: #FFFFCC;
}
h1 {
padding: 20px;
font-size: 26px;
font-weight: bold;
text-align: center;
}
h3 {
font-size: 20px;
text-align: center;
font-weight: normal;
}
#content {
display: table;
margin: 0 auto;
padding: 16px;
height: calc(100vh - 220px);
background-color: #E6E6E6;
}
#content #image {
position: relative;
}
#content #image img {
width: 100%;
height: 100%;
max-height: 100%;
}
#content #ctrls {
position: absolute;
z-index: 99;
display: table;
padding: 2px;
}
#content #ctrls img {
width: 48px;
height: auto;
float: left;
}
#controls {
display: table;
margin: 4px auto;
}
#controls .btn {
margin-top: 6px;
float: left;
}
#controls .prev {
margin-right: 10px;
}
#controls .next {
margin-left: 10px;
}
#controls .off {
opacity: 0.4;
filter: alpha(opacity=40);
}
#controls .btn img {
border: 0;
}
Thank you for any help!

Answer 1

Try this variant. I rewrote your code a bit...
https://codepen.io/opmasan/pen/jObdmdd
:root {
--header-height: 100px;
--footer-height: 200px;
}
*{
margin: 0;
padding: 0;
}
html, body {
font-family: Arial;
}
#tutorial {
width: 100%;
height: 100vh;
background-color: #FFFFCC;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
padding: 20px;
font-size: 26px;
font-weight: bold;
text-align: center;
}
h3 {
font-size: 20px;
text-align: center;
font-weight: normal;
}
#content {
display: flex;
padding: 16px;
background-color: #E6E6E6;
}
#content #image {
position: relative;
}
#content #image img {
height: calc(100vh - var(--header-height) - var(--footer-height));
max-height:100%;
max-width: 100%;
object-fit: cover;
}
#content #ctrls {
position: absolute;
z-index: 99;
width: 100px;
height: 50px;
background-color: #3AE2CE;
}
#controls {
display: flex;
margin: 4px auto;
}
#controls .btn {
margin-top: 6px;
float: left;
}
#controls .prev {
margin-right: 10px;
}
#controls .next {
margin-left: 10px;
}
#controls .off {
opacity: 0.4;
filter: alpha(opacity=40);
}

Answer 2

Remove height: calc(100vh - 220px); from your content div.
Then, Just declare the div size and make the image size 100%.
#image{
height:200px;
width:200px;
}
#image img{
height:100%;
width:100%;
}

Answer 3

https://codepen.io/opmasan/pen/JjYxJgv
This variant with object-fit: contain and some fixes in html will be better:
#content #image img {
object-fit: contain;
}