Remove white modal image background

Question

I have an image that is showed in a modal. Unfortunately this image has a white background. Only the image should be shown and the white shouldn't be visible.

HTML:

<div id="myModal" class="modal"><div id="close">X</div><img id="modalimg" class="modal-content" src=""></div>

CSS:

.modal-content {
  max-height: 850px;
  max-width: 1700px;
  width: auto;
  height: auto;
  margin:0 auto;
  margin-top: 20px;
  object-fit: scale-down;
  background-color: #fff;
}
#myModal{
  height: 100%;
  width:100%;
  position:absolute;
  background-color: rgba(0, 0, 0, .5);
  display: none;
  z-index: 20;
}

JS (if needed):

$('.gallery-img').click(function(){
    $('#myModal').css('display', 'block');
    var src = $(this).attr('src');
    $('.modal-content').attr('src', src);
    $('.modal-content').data('src', src);
});
$('#close').click(function(){
    $('#myModal').css('display', 'none');
});

Edit: Second picture for comparison:

Edit 2: Code Pen: Link

Answer 1

You could set a transparent background color.

.modal-content {
  background-color: transparent;
}