尝试动态调整图像上图标的大小

Question

我正在尝试构建手风琴菜单。到目前为止一切顺利，但我无法弄清楚如何将 "info circle and triangle" IMG 居中并锚定在黑色横幅标题的中间。我需要它看起来像这样”：所以当点击时，手风琴打开（我正在工作）然后图像切换到这个：

（也在工作）。目前，在尝试了无数教程之后，我是这样的：当 window 或浏览器调整大小时，我需要它调整大小并留在横幅内。例如在手机上：

我设法让它居中，但是当包围横幅的 div 缩小时，该图标保持相同大小。我需要在 div/window 调整大小时立即缩放保留率，即需要锁定两者。我根本无法扩展它，也无法原地不动。

我意识到我正在破解这个问题——也许有人可以提供更优雅的解决方案？

如有任何帮助，我们将不胜感激，谢谢。

var acc = document.getElementsByClassName("accordion_heading");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active_heading");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.container {
  width: 100%
}

.accordion_heading {
  background-color: Transparent;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: auto;
  border: none;
  outline: none;
  transition: 2.0s;
}

.active_heading,
.accordion_heading:hover {
  background-image: url('https://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_background_brick.png?17876694196823231872');
  background-size: contain;
  transition: 2.0s;
}

.accordion_heading:after {
  content: url('https://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_white_info.png?17876694196823231872');
  position: relative;
  top: 20%;
  text-align: center;
}

.active_heading:after {
  content: url('https://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_red_info.png?17876694196823231872');
}

.panel_heading {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s ease-out;
}

<button class="accordion_heading"><div style="text-align: center;">
<div style="text-align: center;"><img width="100%"  alt="" src="//cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_communities.png?17876694196823231872"></div>
</div>
</button>

<div class="panel_heading" style="text-align: center;">
  <img width="100%" height="auto" alt="" src="//cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_blurb_communities.png?17876694196823231872" style="float: none;">
</div>

Answer 1

.accordion_heading:after {
    content: " ";
    display: block;
    position: absolute;
    top: 30px;
    height: 25px;
    width: 100%;
    text-align: center;
    background-position: center;
    background-image: url('https://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_white_info.png?17876694196823231872');
    background-repeat: no-repeat;
    background-size: contain;
}

.active_heading:after {
    background-image: url('https://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_red_info.png?17876694196823231872');
}

Answer 2

将 :after 元素位置更改为绝对位置，将元素 left:50% 移动到父元素并 top:50%，然后向后移动宽度 translate(-50% -50%)。像这样，项目总是在中心移动。并将 :after 元素内容更改为 "" 并将 img 用作背景。

 <style>
.container {
 width: 100%
}
.accordion_heading {
    background-color: Transparent;
    position: relative;
    cursor: pointer;
    width: 100%;
    height: auto;
    border: none;
    outline: none;
    transition: 2.0s;
}

.active_heading, 
.accordion_heading:hover {
    background-image: url('https://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_background_brick.png?17876694196823231872');
    background-size: contain;
    transition: 2.0s;
}
/*
.accordion_heading:after {
    content: "";
 width:80px;
 height:38px;
    background: url('https://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_white_info.png?17876694196823231872') no-repeat center;
 background-size:80px 38px;
 text-align: center;
 display:block;
 margin:0 auto;
 position:absolute;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 margin-top:10px;
}

.active_heading:after {
    background: url('https://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_red_info.png?17876694196823231872') no-repeat center;;
 background-size:80px 38px;
}*/

.panel_heading {
 width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-out;
}
.info-icon{
 position:absolute;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 width: 10%;
 max-width:80px;
 margin-top:5px;
}
</style>

   <div class="accordion_heading">
 <div>
  <img width="100%"  alt="" src="http://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_communities.png?17876694196823231872">
 </div>
 
 <img class="info-icon" width="100%"  alt="" src="https://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_white_info.png?17876694196823231872">
 
</div>


<div class="panel_heading" style="text-align: center;">
<img width="100%" height="auto" alt="" src="//cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_blurb_communities.png?17876694196823231872" style="float: none;">
</div>



   

<script>
var acc = document.getElementsByClassName("accordion_heading");
var i;
var infoIcon = document.getElementsByClassName("info-icon")[0];

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active_heading");

 if (this.classList.contains('active_heading')){
  infoIcon.setAttribute("src", "https://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_red_info.png?17876694196823231872");
 } else{
  infoIcon.setAttribute("src", "https://cdn.shopify.com/s/files/1/0019/0909/6500/files/banner_graphic_heading_white_info.png?17876694196823231872");
 }
 
    var panel = this.nextElementSibling; 
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
 
 
  });
}
</script>

尝试动态调整图像上图标的大小

Trying to dynamically resize an icon over an image

html

javascript

css

accordion