html-在不调整div大小的情况下调整图像大小

我查看了成千上万个问题,所有这些问题都想让其适合上级div.我可以将图片放入父div中,但是当我将图片调整为较小尺寸时,div也将变小.我尝试了最大宽度：80％,但div也变小了.我不想调整div框的大小,因为页面中还有其他按钮和列表会随之移动.而且我也不能使用背景图像技巧.唯一的解决方案是设置例如height：框div的高度为150px,但这也给我带来了较小屏幕尺寸的问题.有人可以帮忙吗？这个问题可能会被标记为重复,但我放弃了搜索.

    .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>
   

最佳答案

老实说,我不能完全确定您的要求,但是解决我们在div中使用填充和边距的图片大小并不是我们想要做的.在那里,您必须使用媒体查询来获得响应.

try transform: scale(0.5)

缩放可让您根据最初的内容大小来调整内容的大小.

.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>