[B! トリミング] y-103のブックマーク

y-103 id:y-103

トリミングに関するy-103のブックマーク (2)

CSSのみで画像をトリミングする方法が超便利！【IE・Edge対応】
ブログのサムネイルなど、画像を一覧表示させるときはサイズが統一されていると、きれいに整った印象になります。しかし、Photoshopなどの画像編集ソフトがない環境では、いちいち画像をリサイズするのも現実的ではありません。ということで今回は、サイズやアスペクト比(縦横比)がバラバラの画像をCSSでトリミングする方法のメモ。縦・横・中央それぞれに合わせてトリミングする方法と、トリミングせずにリサイズする方法があるので、ケースバイケースで使い分けるとよいかと。中央配置してはみ出た部分を隠す縦・横・中央、何を基準にするにしても、基本的には「中央配置してはみ出た部分を隠す」形でトリミングしています。中央配置というとpositionとmarginによる指定が一般的ですが、参考ページで紹介されているようにmarginでは画像ごとに数値を指定する必要があるため、今回の場合は不向きです。そこで
y-103 2019/01/31
CSS

トリミング
リンク
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！画像を中央の位置でトリミングするまずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。そこで画像に対して obj
y-103 2017/03/14
css

トリミング
リンク
1