需要使图像在 CSS/HTML 中响应自定义插件

Question

我搜索了现有的问题，发现了一些类似的问题，但那里的建议并没有解决我的问题。

问题来了：

我们正在使用 Wordpress 的可视化编辑器插件。我的老板希望这个插件用于标题中的特殊促销区域 - 他想显示可点击或有按钮的图像。我写了一些自定义 CSS，所以这个插件可以做到这一点。如您所知，问题是您无法在 CSS 中创建链接。所以对于背景图片，我需要一个按钮。但是在这种特殊情况下，图像上的文字太多，按钮不起作用。

所以，我写了一个可以用 HTML 调用的 ID。我创建了一个链接，称为 ID，然后在 ID 内放置了一个文本缩进，它将文本推离页面并且图像可以点击。

这里的问题是，由于某种原因，图像无法完全加载。它在高度方面被切断了。我设置了宽度：100%；和 height: auto;，但这些都不起作用。

所以，我最终只是正常插入了 IMG，并正常链接它，但现在的问题是我需要它做出响应。

我写了一个名为 .responsive-image 的类并设置了宽度：100%；和高度：自动；但这仍然行不通。

我需要将响应式图片信息放在别处吗？我需要写一些其他的类吗？我很茫然，在这一点上已经看了太久了。

你可以在这里看到这个标题小部件 - 100daysofrealfood.com/carrot-top-almond-pesto-sustainable-almond-recipes/

如果您检查一下，您会明白我所说的没有响应的意思。

这是我为将其插入小部件而编写的：

<div class="days100-background-header-widget"><div class="responsive-image"><a 
href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0" 
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>

我在那里有两个地方上课。也许这就是问题？

这是主标题小部件类的 CSS：

.days100-background-header-widget{
display: flex;
align-items: center;
justify-content: center;
}

非常感谢任何反馈。感谢您阅读这个超长的问题！

Answer 1

问题不在于图像本身，而在于具有.days100-background-header-widget 类的父<div>。设置为 display: flex 使得 div 不是 100%。

如果你想在屏幕上居中，你可以在块元素上使用margin: 0 auto。

.days100-background-header-widget{
  display: block;
  margin: 0 auto;
}

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

<div class="days100-background-header-widget">
  <div class="responsive-image">
    <a href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
      <img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0" 
class="responsive-image" alt="Real Food Mini Pledge Program" />
    </a>
  </div>
</div>