title: css image scaling with margin or padding
body: <p>I have a image (or 2) which I need to scale based on the size of the window. It needs to have a minimum margin or padding.</p>
  
  <ol>
  <li>The aspect ratio of the image is 0.533</li>
  <li>The minimum margin/padding left and right side is 51.5px</li>
  <li>The minimum margin/padding bottom is 73px</li>
  <li>The picture should be as big as possible while keeping the aspect ratio.</li>
  </ol>
  
  <p>Is this possible in CSS / Javascript?</p>
  
  <p><img src="https://i.stack.imgur.com/e8oMR.png" alt="What I mean"></p>
  
  <p><img src="https://i.stack.imgur.com/7q3kS.png" alt="What I Have"></p>
  
  <p><img src="https://i.stack.imgur.com/35BEx.png" alt="What I want"></p>
  
  <p>Ok here goes, don't shoot me. I've tried with CSS so far and the closest I got is with jQuery and a table and some CSS:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="myModal" class="modal"&gt;
      &lt;span class="close cursor" onclick="closeModal()"&gt;&amp;times;&lt;/span&gt;
          &lt;table&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td id="mBor1" style="min-width: 51.5px"&gt;&lt;/td&gt;
                      &lt;td id="mMain" style="table-layout:fixed"&gt;
                          &lt;div class="mySlides"&gt;
                              &lt;img id="slide1" src="img/SlideTest.png" class="transparent" &gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td id="mBor2" style="min-width: 51.5px"&gt;&lt;/&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;&lt;td style="min-height: 73px"&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;                    
    &lt;/div&gt;
  </code></pre>
  
  <p>Javascript function:</p>
  
  <pre><code>function Adjust() {
    modLen = $('#myModal').width();
  
    $('#mBor1').width(modLen * 0.038);
    $('#mBor2').width(modLen * 0.038);
    $('#mMain').width(modLen - ($('#mBor1').width() * 2));
    $('#slide1').width(modLen - ($('#mBor1').width() * 2));
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.modal {
  display: none;
  width: 100%;
  height: 100%;
  border: none;
  position:absolute;
  margin: 0;
  padding: 0;
  overflow: auto;
  z-index: 20;
  background-color: rgba(0,0,0,0) !important;
  }
  
  /* Modal Content */
  .modal-content {
  display: flex;
  position: relative;
  background-color: rgba(0,0,0,0);
  margin: auto;
  padding: 0;
  width: 100%;
  /* max-width: 1200px; */
  }
  
  table {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed; 
  }
  
  #slide1
  {
  position: absolute;
  }
  </code></pre>