如何使图像保持div的长宽比

Question

可折叠横幅中的图片在加载时具有倾斜的宽高比。仅当按下“单击我”按钮时，它才会更改为所需的大小。所需的效果是照片保持其纵横比。我怀疑这与javascript有关，但我对javascript一无所知。任何帮助将不胜感激。

Jsfiddle： https://jsfiddle.net/eno34cxp/

var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i++) {
          coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
              content.style.display = "none";
            } else {
              content.style.display = "block";
            }
          });
        }

Answer 1

div.collapsible-content {
  display: none;
  width: 100%;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  /* display: flex; */
  justify-content: center;
}

删除display: flex;，因为它与该代码段重复。