CODEWITHSUNDEEP
javascriptcsshtml
Toofle
Toofle

Reputation: 214

css image scaling with margin or padding

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?

What I mean

What I Have

What I want

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

Upvotes: 3

Views: 12144

Answers (2)

Fernando Paredes Murillo
Fernando Paredes Murillo

Reputation: 167

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.net/w0hW9.png">
  </div>
 </body>

Upvotes: 3

Neil
Neil

Reputation: 400

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

Upvotes: 0

Related Questions