Limit multiple image in div using JS / Jquery / CSS

Question

There is Gridster widgets on my web page . In these widgets, images are first displayed from JSON (the name of the image comes from JSON, which is then placed in the srcimage)

Users can also add images by clicking the button +. The user can also delete the image by clicking the button Xon the image.

Problem i am facing

When the images coming from JSON are larger or when the user manually adds more images, the images disappear from the widgets.

My desired result

Now I tried to limit these images to the widget so that the images lay only within the div.

If there are more images, other existing images will change, and all images will correspond to this area.

When I delete the image, other images will enlarge. In any case, the entire area will be occupied by images.

JS:

    //JSON which I get from backend

    var json = [{
        "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //3 Images
        "col": 1,
        "row": 1,
        "size_y": 2,
        "size_x": 2
      }
    ];
    //Loop which runs over JSON to generate <li> elements in HTML

    for (var index = 0; index < json.length; index++) {
      var images = json[index].html.split(',');
      var imageOutput = "";

      for (var j = 0; j < images.length; j++) {
        imageOutput += '<div class="imagewrap"><img src=' + images[j] + '> <input type="button" class="removediv" value="X" /></div></div>';
      }

      gridster.add_widget('<li class="new" ><button class="addmorebrands" style="float: left;">+</button><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '<textarea>' + json[index].html + '</textarea></li>', json[index].size_x, json[index].size_y, json[index].col, json[index].row);
    }

    //Function to delete an image from widget

    $(document).on('click', '.removediv', function() {
      $(this).closest('div.imagewrap').siblings('textarea')
      $(this).closest('div.imagewrap').remove();

    });

    //Function to delete a widget

    $(document).on("click", ".delete-widget-button", function() {
      var gridster = $(".gridster ul").gridster().data('gridster');
      gridster.remove_widget($(this).parent());
    });



    //Function to add mode Images to widgets from Modal

    var parentLI;
    $(document).on("click", ".addmorebrands", function() {
      parentLI = $(this).closest('li');
      $('#exampleModalCenter').modal('show');
      $('#exampleModalCenter img').click(function() {
        $(this).addClass('preselect');
        $(this).siblings().removeClass('preselect');
        selectedImageSRC = $(this).attr('src');
      })
    });

    $('#add-image').click(function() {
      parentLI.append('<div class="imagewrap"><img src="' + selectedImageSRC + '"> <input type="button" class="removediv" value="X" /></div>');
      parentLI.children('textarea').append(', ' + selectedImageSRC);
      $('#exampleModalCenter').modal('hide');
    })

HTML

 <div class="gridster">
      <!--  <li> from JSON are placed here images are a part of li -->
      <ul>

      </ul>
    </div>

Fiddle still

I'm not sure if this can only be achieved with CSS or it will take any JS along with this

Update 1

I tried with a lot of different CSS, but still could not get the expected result, so if someone can help me, it would be very useful

Answer 1

Gridster may have a built-in way of arranging the elements inside the grid cells, if you haven't found the path yet, try this .

css:

.image-wrap-container{
  min-height: 70%
}

.image-wrap-container div.imagewrap{
  width: 33%
}

.text-area-wrap{
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 30%;
    display: inline-flex;
}

.new.gs-w{
  width: 200px;
  min-height: 200px
}

.addmorebrands{
  position: absolute;
  left:0
}
.delete-widget-button{
  position: absolute;
  right:0
}

html, , , , javascript , html.

. li s ' , , [data-sizey="2"] , , , , , , , .

, , textarea s:

parentLI.children('.imagenames').val(function(i, selectedImageSRC) {return selectedImageSRC + ', '});

, , selectedImageSRC. , :

parentLI.children('.imagenames').val(function(i, currentContent) {return currentContent + ',' + selectedImageSRC + ', '});

, :

.removediv{
  visibility: hidden
}
.imagewrap:hover .removediv{
  visibility: visible
}

,