Question

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

问题在于：

我们正在使用Wordpress的Visual Editor插件。我的老板希望这个插件用于标题中的特殊促销区域 - 他希望显示可点击或有按钮的图像。我写了一些自定义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

问题不在于图片本身，而是在<div>类的父.days100-background-header-widget上。它被设置为显示：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>

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

1 个答案: