如何在不更改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內圖像的大小

回答

相關問題