Question

我查看了成千上万个问题，所有这些问题都想让其适合上级div。我可以将图片放入父div中，但是当我将图片调整为较小尺寸时，div也将变小。我尝试了最大宽度：80％，但div也变小了。我不想调整div框的大小，因为页面中还有其他按钮和列表会随之移动。而且我也不能使用背景图像技巧。唯一的解决方案是为框div设置例如 height：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>

Answer 1

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

尝试变换：比例为（0.5）

scale可让您根据最初的内容大小来调整内容大小。

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

Answer 2

您的box元素也应该具有高度。另外，设置相对位置和绝对位置。子元素应始终以绝对位置放置在父元素内。这样，您可以单独设置大小和位置。

Answer 3

您可以根据需要将视口高度用于div（vh）。

.box { 
      width: 100%;
      height:100vh;
      float: left;
      border:2px green solid;
      margin-bottom:10px;
    }
    .picture {
      border: none;
      outline: none;
      max-width: 80%;
      vertical-align: middle;
    }

请参见示例：https://jsfiddle.net/srijan1709/fvezsnjb/10/

编辑- 您也可以使用 object-fit 来调整div中的图像。根据需要将对象拟合的值设置为缩小或包含。

请参见示例：https://jsfiddle.net/srijan1709/fvezsnjb/27

Answer 4

尝试将div设置为绝对值，并使其相对图像。我在div上添加了一个边框，以查看图像是否通过移动作为测试：

.box {
   position: absolute;
   border: 5px dotted blue; // For testing (remove after done testing)
   width: 100%;
   float: left;
}

.picture {
    position: relative;
    padding: 100px 50px 50px 100px; // Moves the image within the div tag
    outline: none;
    max-width: 100%;
    vertical-align: middle;
}

预期输出：

编辑：根据您的代码期望调整padding和width的值。

请参阅JSFiddle

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

4 个答案: