帶邊距或填充的css圖像縮放

-1

我有一個圖像（或2），我需要根據窗口的大小進行縮放。它需要有一個最小的邊距或填充。帶邊距或填充的css圖像縮放

圖像的縱橫比是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; 
}

來源

2017-07-25 Toofle

你有什麼嘗試？你目前有什麼代碼？到目前爲止，你的代碼不工作？展示你的工作。 :) –

我編輯了我到目前爲止。我把窗戶小而高（像手機）。但是當我把它做成水平的時候。我無法獲得底部的填充或邊距。 – Toofle

我覺得這是你要找的東西：

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

來源

2017-07-25 12:52:00

雖然它縮放時，我使窗口水平較小圖像保持縱橫比。但是當我將底部向上滑動時。圖像就消失了。 – Toofle

我已更新代碼片段以使圖像垂直縮放。 –

這太神奇了。非常感謝你！ – Toofle

，如果你有一個足夠大的圖像，你可以簡單地設置

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

就可以了，在一個容器

margin:0 52px 73px 52px;

例如，然而，如果圖像太小，不會佔用全部位置

來源

2017-07-25 13:15:28 Neil

當我從底部向上滑動時，它不會縮放 – Toofle

帶邊距或填充的css圖像縮放

回答

相關問題