不改变div大小的情况下调整图片大小

Question

我看过成千上万个相关问题，它们都想将图片放入父级div中。我可以将图片放入父级div，但当我调整图片大小时，div也会变小。我尝试了max-width: 80%，但div也随之变小。我不希望div盒子自适应大小，因为页面中还有其他按钮和列表会随着它移动。我也不能使用背景图片技巧。唯一的解决方法是设置例如height: 150px的box div，但这对较小的屏幕尺寸也会造成问题。有谁能帮忙吗？这个问题可能会被标记为重复，但我已经放弃搜索了。

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

- Evik Ghazarian

---

建议您为较小的屏幕尺寸编写媒体查询。 - Rachel Gallen

尝试使用 transform: scale(0.5) ;) - Synoon

@Synoon 尽可能给出最佳答案 :) 我希望这是一个我可以验证的答案 :) - Evik Ghazarian

@RachelGallen 媒体查询并没有解决当前的问题，但我会采纳同样的建议，在较小的屏幕上使用相同的盒子。谢谢。 - Evik Ghazarian

@EvikGhazarian 被添加为答案。 - Synoon

Answer 1

我并不完全确定你所询问的内容，但解决在带有填充和边距的 div 中图片大小的问题并不是我们想要做的。这里需要使用 媒体查询 来实现响应式设计。

尝试使用 transform: scale(0.5)

缩放可以让您根据初始内容的大小调整内容的大小。

Translated Answer:

我并不完全确定你所询问的内容，但是我们不想解决在带有填充和边距的 div 中图片大小的问题。相反，我们需要使用媒体查询来实现响应式设计。

您可以尝试使用 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>

- Synoon

Answer 2

您可以根据需要使用视口高度作为 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内的图像。根据您的需要将object-fit的值设置为scale-down或contain。

查看示例：https://jsfiddle.net/srijan1709/fvezsnjb/27

- Srijan

---

height: 100vh会将屏幕下方的所有其他内容向下推出屏幕。我的框应该最多只有约200像素。 - Evik Ghazarian

请参见：https://jsfiddle.net/srijan1709/fvezsnjb/27/。请在图片类中使用**object-fit: scale-down;**。 - Srijan

我使用或不使用object-fit: scale-down得到相同的结果。 - Evik Ghazarian

我在这个例子中注释了所需的CSS规则集。现在图像也正在调整大小。请指定您想要的div高度为200px或300px。如果可以，请告诉我它是否有效：https://jsfiddle.net/srijan1709/fvezsnjb/43/ - Srijan

Answer 3

尝试将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

- Compiler v2

---

当我将position: absolute应用于盒子时，它会使页面上的其他所有内容都混乱。盒子下面的文本和按钮会被放到盒子后面。 - Evik Ghazarian

Answer 4

你的盒子元素也应该有一个高度。此外，为其设置相对位置，并为图像设置绝对位置。子元素应始终位于具有绝对位置的父元素内。这样，您可以单独设置大小和位置。

- nara92