Question

使图像在移动设备上响应

2016-03-17

314

html css image responsive-design

我想制作一个产品页面，让图片根据屏幕缩放，但我卡住了，无法继续。

我尝试了这里的所有页面，但都遇到了同样的问题，但就是无法正常工作。

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

在您的图像元素中以百分比 (%) 设置宽度，不要介意高度。

这也许有助于解决您的问题。

something

2016-03-17