css scale top image水平と垂直ですが下の画像のみwidth

私は現在、ウェブページ上のオーバーレイとして使用したいモーダルを持っています。css scale top image水平と垂直ですが下の画像のみwidth

HTML：

<div id="myModal" class="modal"> 
    <span class="close cursor" onclick="closeModal()">&times;</span>   
     <div class="imgCon"> 
     <img class="overlayimg" src="img/trendoverlay.png" /> 
     <img class="overlayimg" src="img/trendtimeline.png" style="display: block"/> 
     </div>   
    </div>

CSS：

*{ 
    box-sizing: border-box; 
} 

body{ 
    width:100%; 
} 

.imgCon{ 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    padding: 0 51.5px 73px; 
    text-align: center; 
} 

.overlayimg{ 
    max-width:100%; 
    max-height: 100%; 
    height:auto; 
}

は、しかし、ここで問題です。最初の画像（一番上の画像）のみの画像。それは完璧だ。それはうまく動作します。

下になるイメージは、他のイメージと同じDIVの内部に留まる必要があります。上部イメージと同じ幅である必要があります。しかし、高さは固定されています。これを達成する方法はありますか？それで、彼らはまだ51.5pxの左/右と73pxのパディングを底に伸ばしていますか？詳細と

写真： Example

フィドル： https://jsfiddle.net/4n1quv9n/1/#&togetherjs=sT7KVDhPT8

あなたは、私はそれを拡張する方法をトップ画像スケールを見ることができるように。アスペクト比は維持されていますが、左/右と下が最小です。その下の画像は、上の画像と同じ幅を持つと考えられます。しかし、高さは110pxに固定する必要があります。しかし、画像を含むディビジョンは、サイドとボトムの2つの最小値でパディングを維持する必要があります。

これは間違って起こっている： https://imgur.com/a/ILPpO

をここで下の画像は、トップ画像のように広い拡張しなければなりません。そして、実際には一緒にくっつく必要があるので、2つの別々の画像の代わりに1つの画像のように見えます。

出典

2017-07-26 Toofle

あなたはバイオリンを作るあなたがここに – onetwo12

うん何が間違っているの画像を添付したりできますコードペーン – FabulousCo

を達成したいかを理解することは困難で、 – AmitJS94

あなたが最初の画像を保持してサイズを変更する途中でセルを描画するdisplay:tableプロパティに試してみることができ、第2の画像のためのabsolute positionning：

#modal { 
 
    display: table; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    padding-bottom: 73px;/* bottom limits */ 
 
    box-sizing: border-box; 
 
} 
 

 
#modal:before, 
 
#modal:after { 
 
    content: ''; 
 
    padding-left: 51px;/* sides limits ... pixel cannot be cut in hlves */ 
 
    display: table-cell; 
 
} 
 

 
.modchild { 
 
    display: table-cell; 
 
    position: relative; 
 
    margin-bottom: 100px;/* room for img 2 */ 
 
    width: 1%; /* will expand to fit image width and will stand at middle */ 
 
} 
 

 
img[src*="x212"] { 
 
    height: 100vh;/* size it */ 
 
    max-height: calc(100vh - 100px - 73px);/* downsize to use */ 
 
    display: block;/* or reset vertical-align*/ 
 
} 
 

 
img[src*="x100"] {/* size and stretch it */ 
 
    margin: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    bottom: 0; 
 
} 
 
* {margin:0;}

<div id=modal> 
 
    <div class=modchild> 
 
    <img src="http://dummyimage.com/400x212&text=keep_ration" /> 
 
    <img src="http://dummyimage.com/400x100/ff0&text=distort" /> 
 
    </div> 
 
</div>

フィドル例：https://jsfiddle.net/4n1quv9n/4/

出典

2017-07-26 11:51:29

私はY軸でサイズ変更するときの動作が気に入っています。しかし、X軸では、サイズを変更すると幅が広がります。同じままにするには、画像のアスペクト比が必要です。 – Toofle

@ Toofle最初の画像は比率を維持しますが、2番目は明らかにそうではありません。他の鉛は作物イメージが問題でなければ、オブジェクトフィッティングは比率を保ってイメージの部分を切り取ることができます（切り捨てる側はCSSから選択できます） –

これでほとんどうまくいきます。しかし、私はそれを "幅が大きいが小さい"にすると、水平スクロールバーを取得します。ここではスケールすることも考えられます。私の例のように、灰色のブロックがあります。これは可能ですか？ – Toofle

このトライアル

CSS

body{ 
    position: relative; 
} 
.wrapper{ 
    position: relative; 
} 
div.image-container{ 
    position: absolute; 
    margin:auto; 
    height: 100%; 
    max-width: 100%; 
    padding: 0 51.5px 73px; 
    text-align: center; 
} 

img{ 
    max-width:100%; 
}

HTML

<body> 
<div class="wrapper"> 
    <div class="image-container"> 
     <img src="http://imgur.com/c7uASdV.png"> 
     <img src="http://imgur.com/60d6BUt.png" style="height: 110px"> 
    </div> 
    </div> 
</body>

Link for reference

出典

2017-07-26 11:56:39

なぜあなたはポジションを使用しているのですか？それはそれなしで動作するような縫い目です。 – Fantasterei

私は最小の高さで画面をワイドウィンドウに変更します。それはスクロールバーを取得し、画像は底部の73pxのパディングでサイズ変更されません。 :( – Toofle

css scale top image水平と垂直ですが下の画像のみwidth

答えて

関連する問題