javascript - css image scaling with margin or padding -
i have image (or 2) need scale based on size of window. needs have minimum margin or padding.
- the aspect ratio of image 0.533
- the minimum margin/padding left , right side 51.5px
- the minimum margin/padding bottom 73px
- the picture should big possible while keeping aspect ratio.
is possible in css / javascript?
ok here goes, don't shoot me. i've tried css far , closest got jquery , table , css:
html:
<div id="mymodal" class="modal"> <span class="close cursor" onclick="closemodal()">×</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 think 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.stack.imgur.com/w0hw9.png"> </div> </body>
Comments
Post a Comment