In your code, for the modal-dialog div, add another class, modal-lg:

<div class="modal-dialog modal-lg">

Or if you wanna centre your modal dialog, use:

.modal-ku {
  width: 750px;
  margin: auto;
}

At the moment, this is the best solution I could come up with using only CSS:

.modal-dialog {
  max-width: max-content !important;
}

.modal-body {
  display: flex;
}

.modal-body img {
  object-fit: contain;
}

Only problem is that white bars appear to the left and right of the image when screen height is less then image height.

This is because of the object-fit: contain; style which I added to the image to maintain the original aspect ratio. If you remove this style then then white bars will disappear but the image will not keep it's initial aspect ratio when it's height is shrinking.

JS Fiddle: https://jsfiddle.net/hvaosw5j/

Always have handy the un-minified CSS for bootstrap so you can see what styles they have on their components, then create a CSS file AFTER it, if you don't use LESS and over-write their mixins or whatever

This is the default modal css for 768px and up:

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  ...
}

They have a class modal-lg for larger widths

@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

If you need something twice the 600px size, and something fluid, do something like this in your CSS after the Bootstrap css and assign that class to the modal-dialog.

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

HTML

<div class="modal-dialog modal-xl">

Demo: http://jsbin.com/yefas/1