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

Question

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

<div id="imageContainer"><img  src="myImage.jpg" width="100%"></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”保持不变。我已经调查过了，不太确定该怎么做。感谢您的宝贵时间。

Answer 1

以下应该会有所帮助，

<div class="fixed">
<img class="effect" src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png" width="200" height="120" />
</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

Answer 2

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

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