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

以下应该有帮助，

function Product(object) {
  this.updateData = function(o) {
    this.object = o;
    if (!this.data) this.data = {};
    this.data.id = this.object.val();
    //etc...
  }
  this.updateData(object)
}

CSS如下，

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

演示：JsFiddle Demo

Answer 2

您的问题可能是图像大小为120％ - 这意味着它的容量是其容器的120％。此外，您的图像和div是粘合的。或者换句话说，它们都是相对位置，因此彼此反弹。尝试使您的图像成为绝对位置。如果它有意义的话，它会在div中解除它，但如果它有意义的话。

请注意，浮动不能应用于绝对定位元素。尝试将文字包装到特定的宽度，以便使用图像的大小。

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

2 个答案: