[B! Web制作][画像] nekoneneneのブックマーク

nekonenene id:nekonenene

Web制作と画像に関するnekoneneneのブックマーク (3)

Shrineを使って画像をアップロードする | RE:ENGINES
はじめにこんにちは、onoです。以前、CarrierWaveを使って画像をアップロードするフォームを作成しました。 CarrierWaveは多機能で使いやすいGemだと思いますが、コードが大きく複雑なため、一般的な使い方から外れた場合や問題が発生した場合に処理を追っていくのが大変です。そこで、今回は実装がシンプルで必要な機能を選んで追加できるShrineを使ってみます。 Shrineとは簡単な説明 Shrineはファイルをアタッチするためのツールです。主に画像をアップロードする際に利用されるのではないかと思います。作者 ShrineはJanko Marohnić氏（リポジトリはこちら）が2015年9月から開発しています。特徴主な特徴としては下記の2つが挙げられます。 Shrine本体は必要最小限の機能のみを実装しているため、シンプルでコードが小さい。リサイズやダイレクトア
nekonenene 2020/01/05
Ruby

Rails

Web制作

画像処理

画像
リンク
Shrineでアップロードする際に画像を加工する – RE:ENGINES
はじめにこんにちは、onoです。前回、Shrineを使って画像をアップロードする方法を紹介しました。今回は、アップロード時に画像を加工する方法を紹介します。アップロードする画像のリサイズ Gemを追加 Gemfileに下記のGemを追加します。（HomeBrewなどで事前にimagemagickをインストールしておいてください）
nekonenene 2020/01/05
Ruby

Rails

WEB制作

画像処理

画像
リンク
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
サムネイルを表示するときに、サーバサイドプログラムで画像の縦横を計算してサムネイル画像を作ることがあります。しかし、場合によってはCSS3でサムネイル画像を描画したほうが実装コストが低い場合があります。ここでは、CSS3を使ってサムネイル画像をキレイに描画する方法を紹介します。 1. 内接・外接とは？画像の変形方法はいろいろありますが、ここでは内接リサイズ・外接リサイズについてのみ紹介します。内接リサイズ・外接リサイズとは、画像の縦横比を維持したまま、枠のサイズにフィットするように画像のサイズを変更する描画方法です。印刷出版系の用語だそうです。内接リサイズ外接リサイズ
nekonenene 2017/01/06
アスペクト比を保ったまま拡大する background-size:cover; なことを img でも

Web制作

Webデザイン

CSS

画像
リンク
1

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx