The first if statement doesn't check if the first_click var is true (assuming that is what you intend to do). Since it is empty it would return false and the else statement would run, keeping your image at 25%.

try this:

var content = document.getElementById("sunset");
var first_click = true;

content.addEventListener("click", function () {
    if (first_click == true) {
        content.style.width = "100%";
    }

    else {
        content.style.width = "25%";
    }

});

Have you tried adding height to your container ? This should work

var content = document.getElementById("sunset");
var first_click = true;

content.addEventListener("click", function () {

    if (first_click) {
        content.style.width = "100%";
     
        first_click = false;
    }

    else {
        content.style.width = "25%";
    }

});

#sunset{
  width:25%;
  background: #000;
  height: 200px;
}

<div id="sunset"></div> 

The problem is that you're not toggling the first_click variable to true or false when the image is clicked. The code below fixes this by setting first_click = !first_click:

var content = document.getElementById("sunset");
var first_click = true;
content.addEventListener("click", function() {
  if (first_click) {
    content.style.width = "100%";
  } else {
    content.style.width = "25%";
  }
  first_click = !first_click;
});

#sunset {
  width: 25%
}

<img id="sunset" src="https://dummyimage.com/150/f8f">