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.

1. The aspect ratio of the image is 0.533
2. The minimum margin/padding left and right side is 51.5px
3. The minimum margin/padding bottom is 73px
4. The picture should be as big as possible while keeping the aspect ratio.

Is this possible in CSS / Javascript?

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:

HTML:

<div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
        <table>
            <tbody>
                <tr>
                    <td id="mBor1" style="min-width: 51.5px"></td>
                    <td id="mMain" style="table-layout:fixed">
                        <div class="mySlides">
                            <img id="slide1" src="img/SlideTest.png" class="transparent" >
                        </div>
                    </td>
                    <td id="mBor2" style="min-width: 51.5px"></></td>
                </tr>
                <tr><td style="min-height: 73px"></td></tr>
            </tbody>
        </table>                    
  </div>

Javascript function:

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));
}

CSS:

.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;
}

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.

1. The aspect ratio of the image is 0.533
2. The minimum margin/padding left and right side is 51.5px
3. The minimum margin/padding bottom is 73px
4. The picture should be as big as possible while keeping the aspect ratio.

Is this possible in CSS / Javascript?

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:

HTML:

<div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
        <table>
            <tbody>
                <tr>
                    <td id="mBor1" style="min-width: 51.5px"></td>
                    <td id="mMain" style="table-layout:fixed">
                        <div class="mySlides">
                            <img id="slide1" src="img/SlideTest.png" class="transparent" >
                        </div>
                    </td>
                    <td id="mBor2" style="min-width: 51.5px"></></td>
                </tr>
                <tr><td style="min-height: 73px"></td></tr>
            </tbody>
        </table>                    
  </div>

Javascript function:

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));
}

CSS:

.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;
}

• javascript
• css
• html

• What have you tried? What code do you have so far? What about the code you have so far isn't working? Show your work. :) – Nathan Arthur Commented Jul 25, 2017 at 12:51
• 1 I editted what I got so far. And I mage the window small but tall (like a mobile phone). But when I make it horizontal. I can't get the padding or margin at the bottom to work. – Toofle Commented Jul 25, 2017 at 13:15

2 Answers 2

I think this is what you are looking for:

*{
  box-sizing: border-box;
}

body{
  width:100%;
}

div{
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0 51.5px 73px;
  text-align: center;
}

img{
  max-width:100%;
  max-height: 100%;
  height:auto;
}

<body>
  <div>
      <img src="https://i.sstatic/w0hW9.png">
  </div>
 </body>

if you have a big enough image, you can simply set

max-height:100%;
max-width:100%;

on it, in a container with

margin:0 52px 73px 52px;

for example, however, if the image is too small , it won't take all the place