medium.com がヘッダー画像のトリミング機能をどのように使用しているか、誰でも理解できますか?
オンラインで調べてみましたが、実際には何も見つかりませんでした。これは、そのタイプの唯一のレスポンシブ画像サイズ変更ソリューションです (私が個人的に遭遇したものです)。
私はどんなアイデアにも非常に興味があります-それが助けになるなら-彼らが採用しているシステムは縦向きの画像には非常に悪いです.
機能ヘッダーの例
スケーリング比較ショット
上の画像と下の画像を比較してください (どちらもまったく同じです)。上の画像では上下が 10%~ トリミングされていますが、幅は変更されていません。
この画像では、静的な 10%~ で問題ありませんが、別の画像では、幅/高さ/アスペクト比がトリミングの割合に関係していると思われます。
実際のスケーリング プロセスを示す短いビデオ
CSS
現在、これは私が使用しているコードです（パーセンテージをテストしたかっただけです）。画像は、隠しオーバーフローを使用する image という名前の div 内にあり、画像は上部/下部のパディングを使用して「トリミング」します。
.image {
height: auto;
width: 100%;
overflow:hidden;
}
.image img {
height: auto;
width: 100%;
margin-bottom: -11%;
margin-top: -8%;
}