CSS图像缩放与边距或填充

Question

I have a image (or 2) which I need to scale based on the size of the window. 我有一幅图像（或2张），我需要根据窗口的大小进行缩放。 It needs to have a minimum margin or padding. 它需要具有最小的边距或填充。

The aspect ratio of the image is 0.533 图像的长宽比为0.533
The minimum margin/padding left and right side is 51.5px 左侧和右侧的最小边距/填充为51.5px
The minimum margin/padding bottom is 73px 最小边距/填充底部为73px
The picture should be as big as possible while keeping the aspect ratio. 在保持宽高比的同时，图片应尽可能大。

Is this possible in CSS / Javascript? 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: 到目前为止，我已经尝试过使用CSS，而最接近的是jQuery和一个表格以及一些CSS：

HTML: 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: JavaScript函数：

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

Answer 1

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.stack.imgur.com/w0hW9.png"> </div> </body>

Answer 2

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 例如，但是，如果图像太小，则不会占据所有位置

CSS图像缩放与边距或填充

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-07-25 12:52:00

解决方案2
0 2017-07-25 13:15:28

CSS图像缩放与边距或填充

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-07-25 12:52:00

解决方案2 0 2017-07-25 13:15:28

解决方案1
1 已采纳 2017-07-25 12:52:00

解决方案2
0 2017-07-25 13:15:28