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

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否则您的图像将无法正确缩放。