Question

我有一个图像（或2），我需要根据窗口的大小进行缩放。它需要有最小的边距或填充。

图像的纵横比为0.533
左边和右边的最小边距/填充为51.5px
最小边距/填充底部为73px
在保持纵横比的同时，图片应尽可能大。

这可能在CSS / Javascript中吗？

What I mean

What I Have

What I want

好的，不要开枪打我。到目前为止，我已尝试使用CSS，而我最接近的是使用jQuery和一个表以及一些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 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;
}

Answer 1

我认为这就是你要找的东西：

*{
  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

如果你有足够大的图像，你可以简单地设置

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

在它上面，在

的容器中

margin:0 52px 73px 52px;

但是，例如，如果图像太小，则不会占用所有位置

带有边距或填充的css图像缩放

2 个答案: