88

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

然而，唯一没有的是我在身体中的形象；包含在段落标签中...话虽如此，是否有一种简单的方法可以使图像也响应？

这是我曾经在正文中显示图像的代码：

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

12 回答 12

121

你可以尝试做

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

如果在流体布局中，这应该缩放您的图像。

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

请注意，更改图像的高度会影响比例。

于 2013-03-17T08:04:15.577 回答
57

宽度：当您在更宽的范围内查看时，100% 会破坏它。

以下是 Bootstrap 的img-fluid.

max-width: 100%; 
display: block; 
height: auto;
于 2014-08-29T07:59:09.563 回答
26

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

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

首先，使用HTML 文件中的or属性命名您的<img>标签：classid

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

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

.responsive-image {
  height: auto;
  width: 100%;
}
于 2013-12-09T15:34:27.143 回答
7

要使您网站上的所有图像都具有响应性，请不要从正确的标记更改您的内联 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，否则您的图像将无法正确缩放。

于 2015-05-26T19:00:18.020 回答
6

我正在使用这种技术以一种简单的方式保持徽标对移动设备的响应。徽标将自动调整大小。

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;
}
于 2014-12-12T06:57:25.180 回答
6

我经常用这个

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

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

max-width很重要。否则，您的图像将在桌面上缩放太多。不需要放入height属性，因为默认情况下它是自动模式。

于 2016-04-19T08:00:03.810 回答
5

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

我发现使用 a和设置 a或<div> 您选择的任何其他元素要容易得多。background-imagewidth: 100%background-size: 100%

这并不是响应式图像的全部结束，但它是一个开始。另外，尝试background-size: cover使用background-position: center.

CSS：

.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%;
}

HMTL：

<div class="image-container"></div>
于 2015-06-20T20:44:31.940 回答
3

要使图像具有响应性，请使用以下命令：

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">
于 2015-03-31T13:39:12.137 回答
2

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

Stack Overflow 问题中还有更多内容如何自动调整图像大小以适应“div”容器？.

于 2013-03-17T08:06:44.703 回答
1

图片应该这样设置

img { max-width: 100%; }
于 2014-10-10T11:10:39.437 回答
1

如图所示，使用 Bootstrap 让您的图像无忧无虑。使用类 img-responsive ，你就完成了：

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
于 2015-08-06T21:10:20.937 回答
0

不是添加 CSS 来使图像响应，而是添加不同分辨率的图像 wrt 不同的屏幕分辨率将使应用程序更高效。

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

使用 SASS 可以很容易地使用媒体查询为不同的分辨率使用不同版本的图像。

于 2016-03-24T09:51:24.147 回答