レスポンシブ対応 画像を正方形にトリミングするCSS | グリニッジ株式会社
先日、縦長の画像をレスポンシブ（可変）対応で正方形にトリミングして表示する、というミッションがありましたので備忘録がてら書きます。 スマホの画像を使いたいが縦長すぎるので可変トリミングして欲しい、という時に役立ちそうです。 イメージがわかない方は下の画像(gifアニメーション)を御覧ください。 photo by PAKUTASO コードは以下のとおりです。 ポイントはbefore擬似クラスのpadding-top:100%ですね。 これで横幅に対する高さを計算しています。 このpadding-topの値はボックスのwidthとheightの比率をもとに以下の式で計算します。 縦幅比率 / 横幅比率 * 100 ちなみに、正方形ではなく横縦3:2の四角形でトリミングしたいときは、 2 / 3 * 100 = 66.6666・・・ であるため、padding-topは66.667%と設定するだ
NameBright - Coming Soon
stripjs.com is coming soon This domain is managed at
マウスの動きに追従してぐにょぐにょするjQueryプラグイン「jquery.morphing.js」
マウスの動きに追従してぐにょぐにょするjQueryプラグイン「jquery.morphing.js」 「jquery.morphing.js」は画像などを丸くしてマウスポインターの動きに追従してぐにょぐにょ（？）することができるjQueryプラグインです。 投稿日2014年07月11日 更新日2014年07月11日 使い方 リンク先はデモも用意されていたり日本語だったりなので、そちらを見てもらった方が確実だと思いますが。。 html <div class="js-morphing"> <img src="img/01.jpg" alt=""> </div> JavaScript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="../jqu
画像が順番にフェードインしてくるのをjQueryでつくる。を理解する。 : 森のコーディング
4月23 画像が順番にフェードインしてくるのをjQueryでつくる。を理解する。 カテゴリ:jQueryjavascript Tweet ページを開いたときに、画像が順番にフェードインしてきたらカッコイイ。 こういうやつです。 これをjQueryでつくる方法です。 htmlは以下のようにします。 <div id="photoFade"> <ul> <li><img src="img/index/nyan1.jpg" alt="neko"></li> <li><img src="img/index/nyan2.jpg" alt="neko"></li> <li><img src="img/index/nyan3.jpg" alt="neko"></li> <li><img src="img/index/nyan4.jpg" alt="neko"></li> <li><img src="i
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
