コピー2017.12.27object-fitプロパティを使うと、cssのみで画像の縮小や切り抜きができるようになります。目次object-fitプロパティobject-positionプロパティobject-fitプロパティobject-fitプロパティで指定できる値は5つあります。こちらの150×180の画像を200×100のスペースに表示すると次のようになります。object-fit:fill;アスペクト比を維持せず、指定サイズ全体を埋める初期値。object-fit:contain;アスペクト比を維持して画像全体を指定サイズ内に収め、足りない部分は余白ができる。object-fit:cover;アスペクト比を維持して指定サイズ全体を埋める。はみ出た部分はカットされる。object-fit:none;リサイズせずそのまま表示。はみ出た部分はカット、足りない部分には余白ができる。object-fit:scale-down;noneまたはcontainの小さい方が採用される。cover;の1行を追加するだけで、簡単に画像のトリミングができます。表示上のサイズを変えているだけなので、画像の容量は変わりません。object-positionプロパティobject-positionプロパティは要素をどこに配置するかを指定するものです。50%で、真ん中に配置されます。100%だと右下基準になります。px値で指定することもできます。コピーニケッチャニケッチャメモ関連記事ブログ運営ミルクペイントっぽい色見本ターナーのミルクペイントをご存知でしょうか。アンティークな風合いが手軽に出せる、DIY女子に大人気のペンキだそうです。くすんだ感じの風合いがとても素敵です。今回はこのミルクペイントっぽい色のコードを一覧にして...ブログ運営コピペでOKプラグインなし!押したくなる...かもしれないシェアボタンアイキャッチ画像を背景に使ったシェアボタンボックスを作ってみました。こちらがイメージです。FontAwesomeを既に導入している方はそのままコピペでOKです。FontAwesomeの導入がまだ...ブログ運営1行追加するだけ!簡単かわいいアイコンフォントFontAwesomeを導入する方法FontAwesomeは絵文字のようなウェブフォントです。画像ではなくテキストとして表示されるので、色やサイズをテキストと同じようにcssで設定できます。色とりどりのマカロンをイメージした色のコード一覧です。ポップなイメージに仕上げたい方におすすめです。フランボワーズ...ブログ運営ブラウザサイズを基準に高さや幅を指定したいときにはvwやvhが使える!画面いっぱいに画像を表示したいな~とか思ったとき、%で指定する手法がよく使われます。この%は、親要素のサイズに対する割合を指定するものなので、うまく動作してくれないことがあります。そんなときに使えるのがvwやvhという単位です。Explorerは表示を確認しながらスタイルの微調整ができる便利なツールです。ゲーム、読書、食べることや自然と触れ合うことが好きです!楽しいことや美味しいものの情報を発信していきたいと思います。Twitterではブログ運営に役立ちそうな情報をツイートしてます。ニケッチャメモ.メニューゲーム読書ブログ運営プロフィールホーム検索トップタイトルとURLをコピーしました。