[解決済み] 画像比率に関係なく正方形のサムネイル画像を生成する。
2022-03-04 05:38:09
質問
画像の比率に関係なく、正方形のサムネイルを生成するCSSのみのソリューションを探しています。
.thumbnail {
width: 100px;
height: 100px;
overflow: hidden;
}
img {
width: 100%;
height: auto;
}
上記の例では、画像が縦長である場合のみ正方形のサムネイルが作成され、横長の画像はサムネイルの高さ全体をカバーしません。
CSSのみで解決する方法はありますか( 背景画像として設定する以外に を使用することはできますか?
解決方法は?
通常の
background-image / background-size
メソッドを使用することです。
object-fit
. IEでは動作しませんが。
.thumbnail {
width: 150px;
height: 150px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* for demo only...*/
div {
margin-bottom: 15px;
}
.noscale {
width: auto;
height: auto;
}
<div class="thumbnail">
<img src="//placekitten.com/200/300">
</div>
<div class="thumbnail">
<img src="//placekitten.com/300/200">
</div>
<h4>
Images for reference:
</h4>
<img src="//placekitten.com/200/300" class="noscale">
<img src="//placekitten.com/300/200" class="noscale">
関連
-
[解決済み】CSS "margin: 0 auto" が中央揃えにならない。
-
[解決済み] div要素間の空白を削除する方法
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] bodyタグに追加された奇妙なiframe、`rufous-sandbox`について
-
[解決済み] フォームの中にフォームがある、でいいのかな?[重複]
-
[解決済み] Font Awesome アイコンをプレースホルダーで使用する
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] CSSによる画像の強制リサイズとアスペクト比の保持
-
[解決済み] div内の画像の下に余分なスペースがある
-
[解決済み] div 内の画像をレスポンシブな height で縦に並べる
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CSSのホバー効果が私のコードで機能しない
-
[解決済み】Markdownで'target="_blank"'でリンクを作成することはできますか?
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] カーソルを指ポインタに変更
-
[解決済み] div に斜めのエッジを作成する [重複] 。
-
[解決済み] Angular 2+のテンプレートで値を表す三項演算子
-
[解決済み] 電話番号のマークアップはどのように行うのですか?
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] TD rowspan が機能しない
-
[解決済み] HTMLのバックスペース