ブロック要素のアスペクト比を固定する方法

参考:

CSSだけでアスペクト比を固定するテク – Qiita

Aspect Ratio Boxes | CSS-Tricks

画像に object-fit を指定する

参考:

CSSだけで画像の縦横比を維持したサムネイルを表示する – Qiita

サイズがわからない画像の縦横比を維持したまま表示する方法 object-fit – Qiita

Force an image to fit and keep aspect ratio – Stack Overflow

object-fit – CSS: カスケーディングスタイルシート | MDN

object-fit-CSS3リファレンス

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Web クリエイターボックス

画像を簡単にトリミング&レスポンシブできる object-fit プロパティ | フロントエンド | kigiroku

object-fitとobject-positionで画像をトリミングする方法(IE・Edge対応) | ダイナシイエスタデイ

拡大・縮小

参考:

「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法 | CreativeStyle

スタイルシートで画像を縦横比そのままにリサイズする方法。| 和洋風KAI

画像の縦横比を維持したままリサイズ(拡大/縮小)するCSS – スタイルシートTipsふぁくとりー

css 画像比率を保ったまま拡大・縮小する方法(39407)|teratail

Safari Image Size Auto Height CSS – Stack Overflow

だぶだぶノート » CSS、width:auto、height:autoとタグ属性の関係

画像のアスペクト比を固定するその他の方法

参考:

img画像の縦横比を保ったままボックス内に収める方法 | 1design

CSS force image resize and keep aspect ratio – Stack Overflow

CSSで画像のアスペクト比を保持したままいい感じにトリミングする(レスポンシブ対応) – yuri memo

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld

object-fitをCSSのみでIEにも対応してみる – Qiita

padding-top

参考:

padding-top – CSS: カスケーディングスタイルシート | MDN

How is padding-top as a percentage related to the parent’s width? – Stack Overflow

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA