[CSSチュートリアル]CSSでimg画像を親コンテナdivと適応的なコンテナサイズに埋める
2022-02-03 07:12:01
複数の画像がページに導入されている場合、我々は、画像サイズの不整合と同じサイズでそれらを表示するために単一の要求を発生し、我々は直接画像サイズを設定すると、画像の歪みにつながる、これは我々が遭遇する問題である、以下の解決策を参照してください。
<div>
<img src="introduced image address" alt="">
</div>
方法1:img要素を垂直方向に中央配置し、その高さと幅をフルスクリーンの最小値に設定する。
div{
position:relative;
width: 100px;
height: 100px;
overflow:hidden;
}
div img{
position: absolute;
top: 50%;
left: 50%;
display: block;
min-width: 100%;
min-height: 100%;
transform:translate(-50%,-50%);
}
方法2:imgのcssスタイルに、css3の背景画像のbackground-size:coverと同様のobject-fit:coverを追加する設定にします。
div{
width: 100px;
height: 100px;
}
div img{
width: 100%;
height: 100%;
object-fit:cover;
}
この記事は、CSSはimg画像が親コンテナdivと適応コンテナサイズを埋めるでしょうについて、これに導入され、より関連するCSSはimgは親コンテナの内容を埋めるスクリプトホーム過去の記事を検索してくださいまたは、次の関連記事を閲覧し続ける、私はあなたが将来的にもっとスクリプトホームをサポートして願っています!.
関連
-
[CSSチュートリアル]CSSで簡単!高周波な異形ボタンを実現する方法
-
[CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[CSSチュートリアル】背景-位置の割合の原則の説明
-
[CSSチュートリアル】CSSの新機能には、ページの再描画や並び替えの問題をコントロールする機能が含まれています。
-
[CSSチュートリアル】CSSで炎のエフェクトを記述する方法
-
[css3]スクロールバー美化効果を実現するcss3サンプルコード
-
[CSSチュートリアル】ピュアCSSで作るスクロールシャドウ効果
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[CSSチュートリアル】CSS疑似要素を使って、連続する複数の要素のスタイルを制御する
最新
-
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チュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る
-
[CSSチュートリアル】height:100%と書いても効かない理由
-
[css3]ピュアCSS3によるネオンライト効果
-
[CSSチュートリアル】ピュアCSSで実装した通知バーの3種類のスクロール効果
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[css3]赤いパケットのジッター効果を実現するCSS3
-
[CSSチュートリアル】CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を実現する(コード例)
-
[css3]CSS3ベジェ曲線サンプル:リンクホバーアニメーション効果の作成
-
[css3]CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実装する。
-
[CSSチュートリアル]css use negative margin to achieve average layout of example.