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

Question

我正在尝试构建一个手风琴菜单。到目前为止，还不错，但是我无法弄清楚如何将“信息圆和三角形” IMG居中并锚定在黑色横幅标题的中间。我需要它看起来像这样”： 因此，当单击时，cordician打开（我正在工作），然后图像切换到此：

（也在工作）。目前，在尝试了无数教程之后，我得到了这样的内容： 调整窗口或浏览器的大小时，我需要调整它的大小并留在横幅内。例如在移动设备上：

我设法将其居中，但是当包围横幅的div缩小时，该图标保持不变。调整div /窗口的大小后，我需要立即调整保留比例，即必须将两者锁定。我只是无法使其按比例放大，也无法保持不变。

我意识到我正在通过这种方式闯入自己的道路-也许有人可以提供更优雅的解决方案？

任何帮助将不胜感激，谢谢。

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

将: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>

Answer 2

.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');
}