使图像响应-最简单的方法 [英] Make an image responsive - the simplest way
问题描述
我注意到我的代码具有响应能力，事实上，如果我将其缩放到手机或平板电脑的大小，则所有文本，链接和社交图标都会相应缩放.
I notice that my code is responsive, in the fact that if I scale it down to the size of a phone or tablet - all of the text, links, and social icons scale accordingly.
但是，唯一不存在的是我在体内的形象；包裹在段落标签中...话虽这么说，是否有一种简单的方法也可以使图像具有响应性?
However, the ONLY thing that doesn't is my image in the body; which is wrapped in paragraph tags... with that being said, is there a simple way to make the image responsive as well?
这是我以前在体内显示图片的代码:
Here's the code that I used to have my image show in the body:
<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>
如果采用流畅的布局，这应该缩放您的图像.
This should scale your image if in a fluid layout.
要做出响应(意味着布局对窗口大小做出反应)，可以向图像添加一个类，并在CSS中使用@media查询来更改图像的宽度.
For responsive (meaning your layout reacts to the size of the window) you can add a class to the image and use @media queries in CSS to change the width of the image.
请注意，更改图像的高度会影响比率.
Note that changing the height of the image will mess with the ratio.
这篇关于使图像响应-最简单的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
