Css 使用后选择器的响应图像

我想知道是否可以在插入图像时使用

：after

进行响应

HTML:

我还尝试添加

最大宽度：100%；高度：自动但它也不起作用

你能给我指一下正确的方向吗

谢谢
 尝试设置背景图像而不是内容：url（'）；使用@media screen和（最大宽度：300px）-我很好奇
h2
元素在什么情况下会成为列表的一部分…它不会做同样的事情。使用内容，我添加了一个图像，我没有将其设置为背景。我不想要背景image@JamesDonnelly在侧边栏中
<div class="col-md-3 swap-bot main-sidebar sidebar">
    <ul id="shop-sidebar">
       <li id="text-2" class="widget widget_text">
          <h2 class="widgettitle">shop powered by </h2>
       </li>
    </ul>
</div>

.sidebar>ul>li {
  background: #fff;
  border: 1px solid #aaa;
  border-bottom-width: 2px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  margin-bottom: 20px !important;
}

.sidebar .widgettitle {
  font-size: 16px;
  font-weight: 700;
  padding: 15px 15px 10px 15px;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #aaa !important;
}

#text-2 h2:after{
    content: url('https://blabla.com/wp-content/uploads/2015/05/small.png');
    display: block;
    padding-top: 10px;
    background-size: contain;
    background-position: center;
}