resize image without div being resized - html

Question

I looked over thousands of questions all of them they want to fit picture in a parent div. I can fit picture in a parent div but when I resize the picture to smaller size the div gets smaller as well. I tried max-width: 80% but the div gets smaller also. I don't want the div box to resize because there are other buttons and lists in the page that move with it. And I cant use background-image trick as well. The only solution is to set for example height: 150px for box div but that also gives me problem for smaller screen sizes. Can anybody be any help? This question probably will be flagged duplicated but I gave up on searching.
.box {
width: 100%;
float: left;
}
.picture {
border: none;
outline: none;
max-width: 100%;
vertical-align: middle;
}
<div class="box">
<img class="picture" src="https://www.w3schools.com/w3css/img_lights.jpg" />
</div>

Answer 1

I'm honestly not completly sure what your asking about but solving the size of a picture inside a div with paddings and margins is not what we want to do. there you have to use media-queries to get responsiveness.
try transform: scale(0.5)
scale let you resize your content dependent on how big your content was initially.
.box {
width: 100%;
float: left;
}
.picture {
border: none;
outline: none;
max-width: 100%;
vertical-align: middle;
transform: scale(0.5);
}
<div class="box">
<img class="picture" src="https://www.w3schools.com/w3css/img_lights.jpg" />
</div>

Answer 2

Your box element should have a height too. Also, set a position relative to it and a position absolute to the image. The child element should always be placed inside the parent with an absolute position. This way you can individually set sizes and positions.

Answer 3

You can use viewport height for div (vh) as per your need.
.box {
width: 100%;
height:100vh;
float: left;
border:2px green solid;
margin-bottom:10px;
}
.picture {
border: none;
outline: none;
max-width: 80%;
vertical-align: middle;
}
See the example: https://jsfiddle.net/srijan1709/fvezsnjb/10/
Edit-
You can use object-fit for adjusting the image inside div also. Set value of object-fit to scale-down or contain as per your need.
See the example: https://jsfiddle.net/srijan1709/fvezsnjb/27

Answer 4

Try making the div absolute and the image relative to it. I have added a border to the div to see if the image is moving by itself as a test:
.box {
position: absolute;
border: 5px dotted blue; // For testing (remove after done testing)
width: 100%;
float: left;
}
.picture {
position: relative;
padding: 100px 50px 50px 100px; // Moves the image within the div tag
outline: none;
max-width: 100%;
vertical-align: middle;
}
Expected Output:
EDIT: Adjust the padding and width values according to your code expectations.
Please See JSFiddle