使图像具有响应性 - 最简单的方法 [英] 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屋!