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

前端之家收集整理的这篇文章主要介绍了html-在不调整div大小的情况下调整图像大小 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

  1. .Box {
  2. width: 100%;
  3. float: left;
  4. }
  5. .picture {
  6. border: none;
  7. outline: none;
  8. max-width: 100%;
  9. vertical-align: middle;
  10. }
  1. <div class="Box">
  2. <img class="picture" src="https://www.w3schools.com/w3css/img_lights.jpg" />
  3. </div>
最佳答案
老实说,我不能完全确定您的要求,但是解决我们在div中使用填充和边距的图片大小并不是我们想要做的.在那里,您必须使用媒体查询来获得响应.

try transform: scale(0.5)

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

  1. .Box {
  2. width: 100%;
  3. float: left;
  4. }
  5. .picture {
  6. border: none;
  7. outline: none;
  8. max-width: 100%;
  9. vertical-align: middle;
  10. transform: scale(0.5);
  11. }
  1. <div class="Box">
  2. <img class="picture" src="https://www.w3schools.com/w3css/img_lights.jpg" />
  3. </div>

猜你在找的HTML相关文章