使图像响应移动

我想制作一个产品页面，我希望图片根据屏幕缩放，但我卡住，无法继续。使图像响应移动

我已经尝试过所有关于同一问题的页面，但是无法使其工作。

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

使图像响应移动

回答

相关问题