使图像具有响应性-最简单的方法

小编典典

html

我注意到我的代码具有响应性，事实上，如果我将其缩放到手机或平板电脑的大小，则所有文本，链接和社交图标都会相应缩放。

但是，唯一没有的是我在体内的形象。包裹在段落标签中…话虽如此，是否有一种简单的方法也可以使图像具有响应性？

这是我以前在体内显示图像的代码：

<body>
    </center>
        <p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
    </center>
</body>

阅读 218

2020-05-10

共1个答案

小编典典

你可以尝试做

<p>
  <a href="MY WEBSITE LINK" target="_blank">
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
  </a>
</p>

如果采用流畅的布局，则可以缩放图像。

为了响应（意味着布局对窗口的大小做出反应），您可以向图像添加一个类，并使用@mediaCSS中的查询来更改图像的宽度。

请注意，更改图像的高度将使比率混乱。

2020-05-10