1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
ジョブズも実践したビジネスの結果を向上させるマインドフルネスのやり方と私自身の実体験
0 0 425 0 あなたはマインドフルネスという言葉をお聞きになったことはあるでしょうか？ マインドフルネスとは、簡単に言うと「心が今、起きていることに 100 % 集中する」ことです。 仏教の教えに根ざしたもので、仏教では悟りを開くためにとても重要な概念となっています。 最近、いろんなメディアでもこのマインドフルネスという言葉を目にするようになりました。 マインドフルネスが注目されている背景には、その有効性を示す研究結果が次々と見つかっているということ、そして、そうした根拠を元に Google を始めとした多くの有名企業が研修に取り入れていることなどがあります。 この記事では、記憶力や免疫力、集中力の向上など様々なマインドフルネスの効果とやり方を紹介します。 私自身、ヨガを 15 年、瞑想を 10 年間やってきたことで、アスリートとビジネスマンとしてのパフォーマンスを向上することができ
デザイナーに届けたい…マテリアルデザイン事始め Part.1 - Qiita
2017年DroidKaigi「エンジニアが武器にするMaterial Design」に感化され、わが社でもデザイナー向けマテリアルデザイン勉強会をしてみようと思います。スライド いつの日か「わぁー、イケてるね！（わくわく）」みたいなデザインができる日が来ることを祈って、説明向け資料をまとめていきます。 Part.1 : マテリアルデザインの概観 次回 Part.2 : マテリアルデザインのコンポーネント（小） マテリアルデザインってなんなのさ？ 物質デザイン。デザインパーツを物質として捉え、現実世界のルールに沿うことで、ユーザに直感的な操作を誘導するデザインのこと。 基本の考え方 マテリアルデザインとは紙とインクの要素で出来ている オブジェクトの重なりを物質的に捉える（３次元） 意味のあるアニメーションでより直感的に 紙とインク 紙？ UIパーツは紙でできていると考える。 紙は以下の特徴
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js 2.3 CheatSheet
