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

Question

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

问题是:

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

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

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

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

我写了一个类叫 .responsive-image 并且设置了 width: 100%;和高度:自动；但这仍然行不通。

是否需要将响应式图片信息放在别处？我需要写其他类(class)吗？我很茫然，在这一点上看这个太久了。

您可以在此处看到此标题小部件 - 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

问题不在图像本身，而在父级<div>类 .days100-background-header-widget .它设置为 display: flex 以便 div 不是 100%。

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

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