使图像响应 - 最简单的方式 [英] Make an image responsive - simplest way

问题描述

我一直在寻找这个解决方案一段时间，没有运气。

I have been searching for a solution to this for a while now, with no luck.

我注意到我的代码是响应式的，事实上，如果我缩放到手机或平板电脑的大小 - 所有的文字，链接和社交图标相应地缩放。

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 the ratio

这篇关于使图像响应 - 最简单的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！