前端-如何让div的大小跟随图片的大小改变

<template>
<div class="box">
      <div class="item">
        <img  src="src/assets/myImages/1.jpg" alt="" />
      </div>
      <div class="item">
        <img  src="src/assets/myImages/2.jpg" alt="" />
      </div>
      <div class="item">
        <img  src="src/assets/myImages/3.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<style>
  .box {
    margin: 10px;
    column-count: 3;
    column-gap: 10px;
  }
  .item {
    margin-bottom: 10px;
    width: auto;
    height: auto;
  }
  .item img{
    width: 100%;
    height: 100%;
  }

</style>

如何让图片缩小50% 并且div随着图片大小而改变呢？ 感谢！！