resize image without div being resized

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>