Image size different in browser and in review window

Anki Card Design
1

Please someone help in displaying the image in same size as it is viewed on note in Browser, This is acting as blocker in my reviews particularly with mapping section of a coming exam, Thanks for the help in advance

  • Image in Browser -

image
image1920×1239 153 KB

  • Image during Review -

image
image1920×904 69.5 KB

Notice the different in actual size and display size → It makes review difficult particularly for maps or similar type images

Steps tried so far - setting the image max-width and max-height to different values it is not helping

Also space on left and right on review is not being utiilised if somehow that can be used to be filled by image that would increase the readability of text on image, please provide inputs for this too.

Attaching the css here

/* GENERAL CARD STYLE */
.card {
  font-family: "Helvetica LT Std", Helvetica, Arial, Sans;
  font-size: 150%;
  text-align: center;
  color: black;
  background-color: white;
}

/* OCCLUSION CSS START - don't edit this */
#io-overlay {
  position:absolute;
  top:0;
  width:100%;
  z-index:3
}

#io-original {
  position:relative;
  top:0;
  width:100%;
  z-index:2;
  visibility: hidden;
}

#io-wrapper {
  position:relative;
  width: 100%;
}
/* OCCLUSION CSS END */

/* OTHER STYLES */
#io-header{
  font-size: 1.1em;
  margin-bottom: 0.2em;
}

#io-footer{
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.8em;
  font-style: italic;
}

#io-extra-wrapper{
  /* the wrapper is needed to center the
  left-aligned blocks below it */
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
}

#io-extra{
  text-align:center;
  display: inline-block;
}

.io-extra-entry{
  margin-top: 0.8em;
  font-size: 0.9em;
  text-align:left;
}

.io-field-descr{
  margin-bottom: 0.2em;
  font-weight: bold;
  font-size: 1em;
}

#io-revl-btn {
  font-size: 0.5em;
}

/* ADJUSTMENTS FOR MOBILE DEVICES */

.mobile .card, .mobile #content {
  font-size: 120%;
  margin: 0;
}

.mobile #io-extra-wrapper {
  width: 95%;
}

.mobile #io-revl-btn {
  font-size: 0.8em;
}

.cloze {
  font-weight: bold;
  color: DarkGoldenrod;
}


.top-right {
    position: absolute;
    top: 5px;
    right: 10px;
	  padding-right: 20px;
    padding-top: 20px;
    font-size: 14px;
    color: gray;
}

#legend-container {
  position: fixed;
  bottom: 40px; /* Adjust this value to create space from the bottom */
  right: 0;
}
2

This looks like Anubis Nekhet’s prettify fork to me. Is there more code here?

Have you tried disabling your add-ons?