使图像响应 – 最简单的方法
我一直在寻找解决这个问题的一段时间，没有运气。
我注意到我的代码是响应式的，事实上，如果我将其缩小到手机或平板电脑的大小，则所有文本，链接和社交图标都会相应地缩放。
但是，唯一不是我身上的形象， 这是包裹在段落标签..有人说，是否有一个简单的方法来使图像响应以及？
谢谢！
以下是我用于在图像中显示图像的代码：
</body> </center> <p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p> </center> </body> 你可以试试
<p> <a href="MY WEBSITE LINK" target="_blank"> <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null"> </a> </p>
这应该扩大你的形象，如果在一个stream畅的布局。
对于响应式（意味着您的布局对窗口大小起反应），您可以向图像添加一个类，并使用css中的@media查询来更改图像的宽度。
请注意，更改图像的高度会混淆比例
宽度：当你在更宽广的视angular观看时，100％会打破它。
以下是Bootstrap的img响应
max-width: 100%; display:block; height: auto;
我还build议在HTML文件以外的其他文件中使用所有CSS属性，这样可以使代码更好地组织。
所以要让你的img响应我会做的是：
首先，在您的HTML文件中使用class或id属性命名您的<img>标签：
<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">
然后，在我的CSS文件，我会做出更改，使其响应：
.responsive-image { height: auto; width: 100%; }
我正在使用这种技术来保持徽标作为响应移动设备的简单way.Logo将自动resize。
HTML
<div id="logo_wrapper"> <a href="http://example.com" target="_blank"> <img src="http://example.com/image.jpg" border="0" alt="logo" /> </a> </div>
CSS
#logo_wrapper img { max-width: 100%; height: auto; }
希望这将是帮助。
谢谢
要使网站上的所有图像都能够响应，请不要将内联HTML从正确的标记更改为宽度：100％在所有浏览器中都不起作用，并导致Firefox出现问题。 你想要做的是把你的图像放在你的网站上，你通常应该如何：
<img src="image.jpg" width="1200px" height="600px" />
然后添加到您的CSS，任何图像的最大宽度是100％高度设置为自动：
img { max-width: 100%; height: auto; }
这样你的代码就可以在所有浏览器中运行。 它也将与自定义的CMS客户端（即Cushy CMS），需要图像的实际图像大小编码到内联的HTML，这实际上更容易这样做，当你需要做的图像响应只是在你的CSS状态文件的最大宽度是100％，高度设置为自动。 不要忘记身高：自动或您的图像不能正确缩放。
设置高度或图像的宽度为％100。
更多在这里。 如何自动调整图像大小以适合div容器
要使图像响应使用以下内容：
CSS
.responsive-image { width: 950px;//Any width you want to set the image to. max-width: 100%; height: auto; }
HTML
<img class="responsive-image" src="IMAGE URL">
我一直用这个
您可以自定义img类和max-width属性。
img{ width: 100%; max-width: 800px; }
最大宽度是否定的，否则你的图像会缩放太多的桌面。 无需放置高度属性，因为默认情况下它是自动模式。
图像应该像这样设置
img { max-width: 100%; }
两年迟到这个职位，但..你是不是使用<img>标签？
我发现使用background-image ， width: 100%和background-size: 100%来设置<div> 或您所select的任何其他元素会容易得多。
这不是所有的都是响应式的图像，但这是一个开始。 此外，尝试搞乱background-size: cover ，也许一些定位与background-position: center 。
CSS：
.image-container{ height: 100%; // doesn't have to be '%' can also use 'px' width: 100%; margin: 0 auto; padding: 0; background-image: url(../img/exampleImage.jpg); background-position: top center; background-repeat: no-repeat; background-size: 100%; }
HMTL：
<div class="image-container"></div>
如图所示，使用bootstrap使图像具有免费的使用类img-responsive，并完成
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
而不是添加CSS来使图像响应，添加不同的分辨率图像与不同的屏幕分辨率将使应用程序更有效。
移动浏览器不需要具有与桌面浏览器所需的相同的高分辨率图像。
使用SASS，使用媒体查询，可以轻松使用不同版本的图像进行不同的分辨率。
