Colorbox and Media Colorbox

Hello

I'm having some difficulties in having the adaptive image scale and center in a colorbox / media colorbox (media colorbox allows loading content from media module, including fields, instead of just image).

Best i could do was set Maximum width or height / adjust to height, in which adaptive image style picks the right thumbnail for the screen.

But then i had to hack colorbox css to make the image fit and scale correctly... however, it now fits the entire screen and is not centered, no matter the size of the picture.

Have you experimented with it and found a way to also resize the colorbox accordingly?

this is the css code i added to the theme. not adding any code obviously lets colorbox work normally, but things break: colorbox doesn't resize on first load for each picture, since they aren't cached yet.

#colorbox {
  width: 98% !important;
  height: 98% !important;
  position: absolute !important;
  top: 0px !important;
  left: 0px !important;
}

#cboxWrapper {
  width: 98% !important;
  height: 98% !important;
}
#cboxContent {
  width: 98% !important;
  height: 98% !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
}
#cboxLoadedContent {
  width: 100% !important;
  height: 95% !important;
  overflow: auto !important;
}

#colorbox img {
  display: block;
  margin-left: 0;
  margin-right: 0;
}