Question

我注意到我的代码是响应式的，因为如果我将其缩小到手机或平板电脑的大小 - 所有文本，链接和社交图标都会相应缩放。

然而，唯一没有的是我体内的形象;它包含在段落标签中......据说，有一种简单的方法可以使图像响应吗？

以下是我过去在身体中显示图片的代码：

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

Answer 1

您可以尝试

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

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

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

请注意，更改图像的高度会使比例变得混乱。

Answer 2

宽度：当你在更宽的视野上观看时，100％会打破它。

以下是Bootstrap的img-responsive

max-width: 100%; 
display:block; 
height: auto;

Answer 3

我还建议在与HTML文件不同的文件中使用所有CSS属性，这样您就可以更好地组织代码。

所以为了让你的img响应，我会这样做：

首先，使用HTML文件中的<img>或class属性为您的id代码命名：

<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">

然后，在我的CSS文件中，我会进行更改以使其响应：

.responsive-image {
  height: auto;
  width: 100%;
}

Answer 4

要使您网站上的所有图片都具有响应能力，请不要更改正确的标记内嵌HTML，因为width:100%在所有浏览器中都不起作用并导致Firefox出现问题。您希望将图像放在网站上，通常应该如何：

<img src="image.jpg" width="1200px" height="600px" />

然后在CSS中添加任何图像最大宽度为100％且高度设置为auto：

img {
    max-width: 100%;
    height: auto;
}

这样您的代码就可以在所有浏览器中使用。它也适用于需要图像将实际图像大小编码到内联HTML中的自定义CMS客户端（即Cushy CMS），并且当您需要做的所有操作使图像响应时，实际上更容易实现CSS文件，最大宽度为100％，高度设置为auto。不要忘记height: auto或您的图片无法正确缩放。

Answer 5

我使用这种技术将徽标保持为对移动设备的响应，这是一种简单的方法。徽标将自动调整大小。

<强> HTML

<div id="logo_wrapper">
  <a href="http://example.com" target="_blank">
    <img src="http://example.com/image.jpg" border="0" alt="logo" />
  </a>
</div>

<强> CSS

#logo_wrapper img {
  max-width: 100%;
  height: auto;
}

Answer 6

我一直使用这个

您可以自定义img类和max-width属性：

img{
    width: 100%;
    max-width: 800px;
}

max-width很重要。否则，您的图像将对桌面进行过多扩展。无需放入height属性，因为默认情况下它是自动模式。

Answer 7

如果您被限制使用<img>标记：

我发现使用<div>，background-image和{{1}设置width: 100% 或您选择的任何其他元素要容易得多}。

这不是结束所有响应式图像，但它是一个开始。另外，请尝试使用background-size: 100%和background-size: cover进行一些定位。

<强> CSS：

background-position: center

<强> HMTL：

.image-container{
  height: 100%; /* It doesn't have to be '%'. It can also use 'px'. */
  width: 100%;
  margin: 0 auto;
  padding: 0;

  background-image: url(../img/exampleImage.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}

Answer 8

将图像的高度或宽度设置为％100。

Stack Overflow问题还有更多问题 How do I auto-resize an image to fit a 'div' container? 。

Answer 9

要使图像响应，请使用以下内容：

<强> CSS

.responsive-image {
        width: 950px;//Any width you want to set the image to.
        max-width: 100%;
        height: auto;
}

<强> HTML

<img class="responsive-image" src="IMAGE URL">

Answer 10

图像应该像这样设置

img { max-width: 100%; }

Answer 11

使用Bootstrap可以快速获得图像如图所示。使用类img-responsive，你就完成了：

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">

Answer 12

不是添加CSS来使图像响应，而是添加不同的分辨率图像w.r.t.不同的屏幕分辨率将使应用程序更有效。

移动浏览器不需要具有桌面浏览器所需的高分辨率图像。

使用SASS，可以使用媒体查询轻松地将不同版本的图像用于不同的分辨率。

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

12 个答案:

我一直使用这个