使圖像響應移動

我想製作一個產品頁面，我希望圖片根據屏幕縮放，但我卡住，無法繼續。使圖像響應移動

我已經嘗試過所有關於同一問題的頁面，但是無法使其工作。

HTML代碼：

<div class="container4"><img src="../billeder/antennefor.jpg" width="797" height="576" alt=""/></div>

CSS代碼：

.container4{ 
    background-image:url(../billeder/antennefor.jpg); 
    background-repeat:no-repeat; 
    border:1px solid #D54244; 
    background-color:transparent; 
    width: 100%; 
    max-width: 100%: 
}

來源

2016-03-17 Sverkel

你有一個固定的寬度爲您的圖像，因此不會與頁面縮小。刪除img標籤的寬度和高度屬性，並添加一個css規則.container4> img {width：100％}這應該確保圖像始終適合頁面的寬度。 – kerwan

我不知道，如果是thaht，但你可以測試一下。

HTML：

<div class="container4"> 
    <img src="http://lorempixel.com/400/200" alt="" /> 
</div>

CSS：

.container4 img { 
    width: 100%; 
}

http://codepen.io/fabiovaz/pen/BKpwxX

來源

2016-03-17 15:05:08 fabiovaz

你的問題是您正在使用的HTML標籤width和height，這是不好的做法。

因此刪除這些標籤。

取而代之的是：

<img src="../billeder/antennefor.jpg" width="797" height="576" alt=""/>

有這種

<img src="../billeder/antennefor.jpg" alt=""/>

，並在你的CSS，你只需要應用到img

來源

2016-03-17 15:08:48 dippas

在你的圖像元素max-width:100%用百分比設置寬度（％），不介意高度。

這可能有助於解決您的問題。

來源

2016-03-17 15:11:02 something

也許考慮使用Bootstrap？

這就是我用來使我的圖像響應。所有你需要做的就是包含Bootstrap CSS，然後將「img-responsive」類應用到你的圖像。

來源

2016-03-17 15:20:09 Yan

沒有你的輸入作品，我很難過的說，但我也忘了說這個圖像是在一個iframe中，實際上，所有的內容都是從iframe中獲取的。 – Sverkel

使圖像響應移動

回答

相關問題