使图像具有响应性-最简单的方法
我注意到我的代码具有响应能力，事实上，如果我将其缩放到手机或平板电脑的大小，则所有文本，链接和社交图标都会相应缩放。
但是，唯一没有的是我在体内的形象。包裹在段落标签中...话虽如此，是否有一种简单的方法也可以使图像具有响应性？
这是我以前在体内显示图像的代码：
<body>
</center>
<p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
</center>
</body>
慕娘9325324浏览 440回答 3
3回答
-
海绵宝宝撒
你可以尝试做<p> <a href="MY WEBSITE LINK" target="_blank"> <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null"> </a></p>如果采用流畅的布局，则可以缩放图像。为了响应（意味着布局对窗口的大小做出反应），您可以向图像添加一个类，并使用@mediaCSS中的查询来更改图像的宽度。请注意，更改图像的高度将使比率混乱。 -
千巷猫影
我还建议在与HTML文件不同的文件中使用所有CSS属性，以便可以更好地组织代码。因此，为了使您的img具有响应性，我会这样做：首先，<img>使用HTML文件中的class或id属性为标签命名：<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">然后，在我的CSS文件中进行更改以使其响应：.responsive-image { height: auto; width: 100%;} -
收到一只叮咚
要使您网站上的所有图像都具有响应性，请不要通过正确的标记更改内联HTML，因为width:100%它不能在所有浏览器中都起作用，并且会在Firefox中引起问题。您希望将图片放置在网站上，通常应采用以下方式：<img src="image.jpg" width="1200px" height="600px" />然后向您的CSS添加任何图像最大宽度为100％且高度设置为自动的情况：img { max-width: 100%; height: auto;}这样，您的代码即可在所有浏览器中使用。它也可以与需要将图像的实际图像大小编码到内联HTML中的自定义CMS客户端（即Cushy CMS）一起使用，并且当您需要使图像具有响应性的所有操作只是在您的状态中声明时，这种方法实际上更容易最大宽度为100％，高度设置为自动的CSS文件。不要忘记，height: auto否则您的图像将无法正确缩放。
随时随地看视频慕课网APP
Html/CSS