如何在不更改 div 大小的情况下更改 div 内图像的大小

Posted 2023-03-06

【中文标题】如何在不更改 div 大小的情况下更改 div 内图像的大小

【英文标题】：How to change the size of an image inside a div without changing the div size

【发布时间】：2017-03-20 01:56:23

【问题描述】：

学习 CSS 和使用媒体查询。我有一张图片漂浮在左边，右边有一些文字。

<div id="imageContainer"><img  src="myImage.jpg" ></div>

<div id="someText"> some text....</div>

当我调整浏览器窗口的大小时，图像变得更小，因此底部开始出现白色间隙。我想通过使用媒体查询增加图像的大小来解决这个问题。这是我尝试过的：

@media screen and (min-width: 1000px) and (max-width: 1299px)
    #imageContainer img min-width: 120%;

这会起作用，因为随着窗口大小的调整，图像开始变小，当宽度变得小于 1299 像素时，图像的大小会增加，从而使间隙消失。

我的问题是，随着图像变大，包含它的 div 也会变大，将文本推到右侧并破坏我的布局。我想要的是图像增加，但包含的 div“imageContainer”保持不变。我已经调查过了，不太确定该怎么做。感谢您的宝贵时间。

【参考方案1】：

以下应该会有所帮助，

<div class="fixed">
<img class="effect" src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png"   />
</div>

而CSS如下，

.effect 
  border: none;
  margin: 0 auto;

.fixed
  height: 200px; width: 200px; overflow: hidden;

.effect:hover 
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;

演示：JsFiddle Demo

【参考方案2】：

您的问题可能是图像大小为 120%——这意味着它将是其容器大小的 120%。此外，您的图像和 div 是绑定的。或者换句话说，它们都是相对位置，因此相互反弹。尝试使您的图像成为绝对位置。如果有意义的话，它将从 div 中解除绑定，同时仍被包含在其中。

请注意，浮动不能应用于绝对定位的元素。尝试将文本换行到适合图像大小的特定宽度。

【讨论】：

您好，我已尝试将图像定位更改为绝对位置，然后将大小的增加应用于图像而不是 div，但 div 的大小仍然在增长。

Hrm...我对媒体查询了解不多，但你确定#imagecontain 有最小-最大宽度吗？它的显示类型是什么？