マージンやパディング付きのCSS画像拡大縮小

-1

私は、ウィンドウのサイズに基づいて拡大縮小する必要のある画像（または2）を持っています。マージンやパディングは最小限必要です。マージンやパディング付きのCSS画像拡大縮小

画像が同じ大きなければならない最小マージン/パディング底部は73px
ある画像のアスペクト比が左0.533
最小マージン/パディングであり、右側が51.5px
ありますアスペクト比を維持しながら可能です。

これはCSS/Javascriptで可能ですか？

What I mean

What I Have

What I want

[OK]をここに、私を撮影しません。私はこれまで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

あなたは大きな十分なイメージを持っている場合ならば、あなたは単に、しかし、例えば

margin:0 52px 73px 52px;

とコンテナに、その上に

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

を設定することができますイメージが小さすぎる、それはすべての場所を取ることはありません

出典

2017-07-25 13:15:28 Neil

底面からスライドさせると縮尺は変わりません – Toofle

マージンやパディング付きのCSS画像拡大縮小

答えて

関連する問題