車いすなコーダーAbout小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。赤い電動車いすに乗って生活をしています。不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。MarCSSCSS3cssで画像をトリミングできるプロバティとして「object-fit」というのがあるようですね。背景画像に対して適用できる「background-size」に使い方が非常に似ています。それでは、紹介に入りたいと思います。object-fitプロバティについて例えば、以下のようなお肉(マトンフィレ)のお写真があります。300px;と指定してます。縦横比が崩れグシャッとした感じの表示になっているかと思います。cover;と追記してみようと思います。結果は以下のように...お分かりいただけましたでしょうか?縦横比が維持され、センターでトリミングされたような表示になっているかと思います。このような事がCSSたった1行で実現してしまうのです。contain;にしてみると...今度は縦横比が維持されたまま、画像全体(マトンフィレ)が表示される形となりましたね。使える値としては以下の5種類となります。縦横比は維持せず埋め尽くされて表示されます。contain縦横比を維持します。要素全体が収まるよう調整され、幅・高さの内長い方に合わせてフィットされます。cover縦横比を維持します。要素全体が埋め尽くされるよう調整され、幅・高さの内短い方に合わせてフィットされ、長い方ははみ出しトリミングされます。noneサイズ調整なく表示されます。scale-downnone、containの内、小さくなる方が適用されます。個人的には特に「cover」が便利だなーと思いました。今回は、実際に挙動の確認ができるサンプルも作ってみました!こちらも併せて見てみてください!サンプルを確認するCSS3は便利なものが目白押しですね!古いIEの対応が不必要になったりで、特に最近はCSS3を存分に使えるような傾向にあるかと思います。覚えて有効活用していきたいものですね。Posts2019.07.15「別のプログラムがこのフォルダーまたはファイルを開いているので、操作を完了できません。