我查看了成千上万个问题,所有这些问题都想让其适合上级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>