1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
無料でウェブサイトやブログに使える写真を検索可能な28サービスまとめ
無料の写真素材を扱うストックフォトサービスの中には、個人利用だけでなく、商用利用が可能なものや、クレジット表記が不要で完全フリーに使える写真も多く存在します。さまざまなジャンルのストックフォトサービスがSocial Media Todayによってリストアップされており、写真家が撮影した「作品」と呼べるレベルの写真や、食べ物に特化した写真、ヴィンテージ写真、ファッションに関係するおしゃれな写真など、検索サービスによって扱う写真の特色がさまざまなので、見ているだけでも楽しめます。 28 Places to Download Free Images for Websites and Blogs | Social Media Today http://www.socialmediatoday.com/marketing/28-places-download-free-images-websites
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
