background-size cover;が切れるので高さを補い全画面表示【CSSの小ネタ】

おすすめのオンラインプログラミング学習

CSSの小ネタです。

background-size cover;が切れるので高さを補い全画面表示

background-size: 100% 100%ではありません。 containはタイル状に並べてしまうので、あまり使いどころがないでしょう。

.img {
  height: 0;
  padding-top: 48%;
  background: linear-gradient(25deg, rgba(255, 0, 0, 0.4), rgba(0, 255, 0, 0.4)),
    url('imges.jpg');
  background-size: cover;
}

padding-topで適当に見ながら調整すればOKです。heightは0にするといいでしょう。

スポンサーリンク

background-size cover;が切れるので高さを計算する

参考サイトです。

背景画像の縦横比率を維持したまま、コンテンツの幅に合わせて表示させる方法
背景画像を表示させる際に、画像の見え方自体は固定しつつ、元の画像サイズ以上にブラウザを広げた時には、画像の縦横比率を固定したままボックスごと拡大して表示させたい、そんな時に使える方法を紹介します。CSS.sample { -moz-b
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法です。

計算方法も書かれていますが、見ながら調整した方が早いかもです。

スポンサーリンク

CSSの学習サイト

基本Udemyがおすすめです。

動画編集/プログラミング/資産運用などUdemyのおすすめコース
プログラミング、動画編集、資産運用などudemyのすべて実経験でおすすめコースをまとめていきます。Udemyは日本に来る前から愛用しています。半分ぐらい英語の講座を買っています。 udemyはセールがあるため、とりあえず会員登録してお...
人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました