Question

我正在尝试创建一个产品页面，我希望图片可以根据屏幕进行缩放，但我已经卡住了，无法继续使用。

我已经在同一个问题上尝试了所有页面，但是无法让它工作。

HTML CODE：

<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

在你的image元素中设置宽度，以百分比（％）为单位，不要介意高度。

这可能有助于解决您的问题。

Answer 4

也许考虑使用Bootstrap？

这就是我用来使图像响应的原因。您所要做的就是包含Bootstrap CSS，然后将“img-responsive”类应用于您的图像。

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

在移动设备中使图片响应

4 个答案: