Expand div according to dynamically changing background-images-CodePudding

I have a div container, and within that I have a span and another div that contains an image, or at least a background-image. So basically it looks something like:

<div >
  <span>My text</span>
  <div  [style.backgroundImage]="'url('   <image-path>   ')'">/<div>
</div>

So the image inside changes dynamically depending on some conditions, i.e. the images/background-images that will be shown does not have the same size all the time.

The CSS looks something like this:

.parent {
  display: grid;
  max-width: 300px;
  width: 100%;
  padding: 10px;
}

.image {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  min-height: 180px;
  height: 100%;
  justify-self: center;
  width: 100%;
}

So right now the initial state of the image container is a height of 180px, which the background-image will obey. So even though the image is 300px in width and 600px in height it will scale to 180px in height and the corresponding width, i.e. it will not go to the edge of the 300px in width parent container. Just as intended.

The issue arises when I want to do some click-to-zoom stuff.

So basically I just add the following:

<div >
  <span>My text</span>
  <div  [style.backgroundImage]="'url('   <image-path>   ')' (click)="imageZoom = !imageZoom" [ngClass]="imageZoom ? 'is-active' : ''" />>/<div>
</div>

And here the issue is the CSS - if it is even possible. So by clicking this I just want it to become the max width of the container. So let's assume I have two images with the size of 300x600 and 500x800. Since the images doesn't have the same size I can't just put a fixed height on the is-active property for all images. Because when the first image takes up the full width of the parent container it will have a height of 600px while the other will be 480px.

I am not sure if this can be accomplished with pure CSS, or if I have to use some JS/Angular to do so - which I'm not opposed to ?

You might ask why I just don't use images instead of background-image, but it's basically a right-click issue I wish to prevent, and some other stuff. So I can't change it unfortunately :)

CodePudding user response：