使圖像在移動設備中具有響應性

Question

我正在嘗試制作一個產品頁面，在該頁面上我希望圖片根據屏幕縮放，但是我被卡住了並且無法繼續。

我已經在同一問題上嘗試過此處的所有頁面，但無法使其正常工作。

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

Answer 1

您的問題是您正在使用HTML標簽的width和height ，這不是一個好習慣。

因此，請刪除這些標簽。

代替這個：

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

有這個

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

在您的CSS中，您只需要將max-width:100%應用於img

Answer 2

我不知道是不是，但你可以測試。

HTML：

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

CSS：

.container4 img {
  width: 100%;
}

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

Answer 3

在圖像元素中，以百分比（％）設置寬度，而不必擔心高度。

這也許有助於解決您的問題。

Answer 4

也許考慮使用Bootstrap？

這就是我用來使圖像具有響應能力的方法。 您所要做的就是添加Bootstrap CSS，然后將“ img-sensitive”類應用於圖像。

更多信息@ http://getbootstrap.com/css/#images