html - 使图像在移动设备中响应

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