使用 margin 或 padding 进行 CSS 图片缩放

Question

使用 margin 或 padding 进行 CSS 图片缩放

javascriptcsshtml

3

我有一张（或两张）图片需要根据窗口的大小进行缩放。它需要具有最小的边距或填充。

图像的长宽比为0.533
左右两侧的最小边距/填充为51.5像素
底部的最小边距/填充为73像素
图片应尽可能大，同时保持其长宽比。

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

- Toofle

你尝试过什么？你目前有什么代码？你目前的代码有什么问题？展示你的工作吧。 :) - Nathan Arthur

1

我已经修改了我迄今为止所得到的内容。并将窗口调整为小而高（像手机一样）。但当我将其水平放置时。我无法使底部的填充或边距起作用。 - Toofle

2个回答

0

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

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

在其中，放置一个容器内

margin:0 52px 73px 52px;

例如，如果图像太小，则不会占据所有空间。

- Neil

当我从底部向上滑动时，它无法缩放。 - Toofle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fernando Paredes Murillo · Accepted Answer

我认为这就是您在寻找的内容：

我想这就是您要找的：

*{
  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://istack.dev59.com/w0hW9.webp">
  </div>
 </body>