使图像具有响应性-最简单的方法[重复]

Posted 2023-03-05

技术标签:

【中文标题】使图像具有响应性-最简单的方法[重复]【英文标题】：Make an image responsive - the simplest way [duplicate] 【发布时间】：2013-03-05 17:12:03 【问题描述】：

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

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

这是我用来在正文中显示图像的代码：

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

【问题讨论】：

我们需要看一些代码刚刚在我的问题中添加了它我不确定我是否会称其为重复，因为我的代码与他的代码相差很大但他遇到了同样的问题我打算将其标记为副本，直到我意识到其他人已经这样做了。 【参考方案1】：

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

以下是 Bootstrap 的img-fluid。

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

【讨论】：

【参考方案2】：

我一直用这个

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

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

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

【讨论】：

这帮助我解决了降价图像响应（红地毯），谢谢。【参考方案3】：

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

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

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

【讨论】：

【参考方案4】：

使用 Bootstrap 轻松处理图像如图所示。使用类 img-responsive 就完成了：

<img src="cinqueterre.jpg" class="img-responsive"   >

【讨论】：

【参考方案5】：

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

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

这不是响应式图像的全部，但它是一个开始。另外，尝试使用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>

【讨论】：

【参考方案6】：

要使您网站上的所有图像都具有响应性，请不要使用正确的标记更改内联 html，因为 width:100% 并非在所有浏览器中都有效，并且会导致 Firefox 出现问题。您希望按照通常的方式将图片放置在您的网站上：

<img src="image.jpg"   />

然后在您的 CSS 中添加任何图像最大宽度为 100% 且高度设置为自动：

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

这样您的代码就可以在所有浏览器中运行。它还可以与要求图像将实际图像大小编码到内联 HTML 中的自定义 CMS 客户端（即 Cushy CMS）一起使用，当您需要做的只是让图像响应时，它实际上更容易最大宽度为 100% 且高度设置为自动的 CSS 文件。不要忘记height: auto，否则您的图片将无法正确缩放。

【讨论】：

高度：初始；对于 IE【参考方案7】：

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

HTML

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

CSS

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

【讨论】：

【参考方案8】：

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

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

首先，在您的 HTML 文件中使用 class 或 id 属性命名您的 <img> 标记：

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

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

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

【讨论】：

【参考方案9】：

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

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

【讨论】：

如果我将它设置为 50% 会怎样，这是否意味着按比例缩小后它将是原始大小的一半？ 100% 使其适合容器。因此，当您调整页面大小时，容器会调整大小，因此 img 也会调整大小。其实您发送的图片自动调整大小链接解释得很好。【参考方案10】：

你可以试试

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

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

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

注意改变图片的高度会弄乱比例。

【讨论】：

它让我的形象变得巨大，哈哈，但现在它确实缩小了。我怎样才能让它保持原来的图像尺寸？添加max-width: 300px;（例如）到它。让它成为你想要的最大的，这样它就不会超出这个范围谢谢你，很好的回答。另外，@media 是什么意思？如果你能更深入地解释一下（我 2 天前才开始编码）。这里是一些媒体查询的官方文档w3.org/TR/css3-mediaqueries，这里有一些可以更好地解释它的东西:) css-tricks.com/css-media-queries 你的图片应该是max-width: 100%;【参考方案11】：

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

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">

【讨论】：

【参考方案12】：

图片应该这样设置

img  max-width: 100%;

【讨论】：

为什么要同时设置width 和max-width？也许将宽度和最大宽度设置为 100% 是多余的，但我已经使用了它并且它有效，我已经相应地更改了答案。如果图像未设置为元素的正确大小，则设置 width: 100% 将破坏布局。设置max-width: 100% 有效。

以上是关于使图像具有响应性-最简单的方法[重复]的主要内容，如果未能解决你的问题，请参考以下文章

使图像和文本的网格系统具有移动响应性

如何使 Bootstrap Carousel 中的图像具有响应性？

如何使此图像地图元素具有响应性？

将图像设置为 JPanel 背景的最简单方法

从 PHP 脚本获取和解释 XML 文件响应的最简单方法是啥？ [复制]

Vega 图表 - 如何使图表具有响应性