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

学习CSS并使用媒体查询。我有一个图像漂浮在左边，一些文字在右边。如何在不更改div大小的情况下更改div内图像的大小

<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%;} 
}

此作品为图像中开始变小的调整窗口大小，当宽度变使得间隙尺寸小于1299px的图像会增加消失。

我的问题是，随着图像变得越来越大，包含它的div，将文本向右推并破坏我的布局。我想要的是为图像增加，但包含div“imageContainer”保持不变。我仔细研究过它，不太清楚如何去做。谢谢你的时间。

来源

2016-11-06 Paul

您的问题可能是图像的大小是120％ - 意味着它将是无论其容器大小的120％。此外，你的图像和div是保税区。换句话说，他们都是相对的立场，因此互相反弹。试着让你的图像成为绝对的位置。如果有意义的话，它将从div中解除绑定，但仍然包含在div中。

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

来源

2016-11-06 19:07:44 Tapu

嗨，我试图改变形象定位为绝对，然后应用尺寸增加到图像不是div，但div仍然在增大。 – Paul

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

之后应该帮助，

<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

来源

2017-05-24 07:59:47

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

回答

相关问题