最大幅と最大高さを持ち、比率を保持しているDiv（CSSのみ）

Question

ここは難しいものです。可能であれば、CSSのみでこれが達成できるかどうか本当に分かります。

私は、親コンテナに基づいてイメージのサイズと配置を必要とする独自のレイアウトを持っています。イメージが親の高さまたは幅を超えている場合は、サイズを小さくする必要があります。現時点では、max-widthとmax-heightを一緒に使用していますが、うまくいきます。画像はサイズに合わせてサイズが変更され、もちろんアスペクト比が維持されます。

ここでは難しい部分があります。 CSSボックスのシャドウでは実現できない特別な影をこの画像に追加する必要があります。影はPNG画像を使用します。シャドーは画像のサイズと位置を合わせる必要があります。つまり、シャドーはイメージの下部にあり、イメージの幅と同じです。

通常、私は影を達成するであろう::後、大きさや位置、それはそれに比べて、それは親の除いて完全にを働く親要素、だ画像と画像が許可していない::前または::の後であります。

私が知る限り、これを達成する唯一の方法は、別のコンテナにイメージをラップすることです。そのコンテナを親要素として使用し、シャドウレイヤの位置決め参照を使用できます。 しかし私は、そのコンテナdivが画像のアスペクト比を維持したままmax-widthとmax-heightサイジングの点で画像と同じように動作するようにする方法を見つけることができません。

アスペクト比を維持するための最良の方法は、幅が唯一の重要な要素であるときにすばやく動作するパディングトップを使用します。しかし、パディングトップ技術は、コンテナが最大高さを有することを可能にしない。

私はブロック要素がアスペクト比を維持し、同時に最大幅と最大高さを持つことを可能にするCSSテクニックを探しています。この状況で画像がどのように振る舞うかと同様です。

私は解決策のためにインターネットを精査しましたが、誰もこの正確な状況を説明していません。助けることができる誰にも非常に感謝しています。追加された2017年9月1日

：

私はそれが私がイメージへの相対的な位置する必要があるだけの影よりもだということを言及する必要があります。このように配置する必要がある他の要素もありますが、他の要素は単純な背景画像ではありません。 Lightbenderのソリューションはシャドーには最適ですが、大きな問題は解決していません。画像の周りに他の子要素を配置するための参照として使用できるコンテナが必要です。

Answer 1

前と後は動作しませんが（簡単に）、パディングと背景イメージを使用することができ、現在の設定が正しく動作します。

img.fancyshadow { 
    height: auto; 
    width: auto; 
    max-width: 100%; 
    max-height: 100%; 
    padding: 0 10px 10px 0; /* adjust as needed */ 
    background: url('path/to/your/shadow'); 
    box-sizing: border-box; 
} 

私は、Macの便利を持っていないので、私は唯一のFirefox、クロム、およびIEでこれをテストしてみた、誰にもサファリを確認することができますか？

Answer 2

私は、あなたが出発点として試しているものの簡単な例を見たいと思いますが、画像はコンテナのサイズに基づいてサイズ調整する必要があると述べました。

ここに、そのようなものの開始例があります。問題に合わせて変更できるかどうかは不明です。私に知らせて、私は微調整することができます。

レスポンシブなイメージが必要な場合は、決してIMGタグを使用しません。 CSSで背景画像を設定することで、レスポンシブサイト/アプリをより詳細に制御できます。 背景サイズに

ドキュメント：

カバースケール背景領域が完全に背景画像によって覆われるように、背景画像はできるだけ大きくします。背景画像の一部が背景配置領域内ビューでないかもしれない

は、その幅 と高さの両方がコンテンツ領域内

に適合できるような最大サイズにスケール画像を含みます私はまだ考えていなかった

$(function() { 
 
    $('.banner').resizable(); 
 
});

.banner { 
 
    background-image: url('https://s-media-cache-ak0.pinimg.com/originals/15/ae/a6/15aea601612443d5bddd0df945af6ffd.jpg'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 175px; 
 
    width: 100%; 
 
} 
 

 
p { 
 
    color: #666; 
 
} 
 

 
.ui-resizable-se { 
 
    box-shadow: -1px -3px 10px 3px white; 
 
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> 
 

 
<h1>Resize the image using the black triangle at bottom right of image</h1> 
 
<p>Note how the image fills the container and the position is always centered (you can control where the position is, doesn't have to be in the center)</p> 
 

 
<div class="banner"> 
 
</div>