CODEWITHSUNDEEP
javascripthtml
clearblueskies
clearblueskies

Reputation: 7

how to make image maintain aspect ratio in div

The picture within the collapsible banner has a skewed aspect ratio upon loading. Only when the "click me" button is pressed will it change to the desired size. The desired effect is that the photo maintains its aspect ratio. I suspect it is something to do with the javascript but I know nothing about javascript. Any help would be much appreciated.

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";
            }
          });
        }

Upvotes: 0

Views: 61

Answers (1)

SuperStar518
SuperStar518

Reputation: 2885

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

Remove display: flex; since it's a duplicate within that snippet.

Upvotes: 1

Related Questions