タグ

ブックマーク / bambooworks.co (1)

  • CSSのみで画像をトリミングする方法が超便利!【IE・Edge対応】

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

    CSSのみで画像をトリミングする方法が超便利!【IE・Edge対応】
  • 1