A WebGL application made with PlayCanvas (https://playcanvas.com)
After the Flood - WebFest
A WebGL application made with PlayCanvas (https://playcanvas.com)
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2024年8月19日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して ob
AMP Conf 2017へ行ってきました #AMPConf | メルカリエンジニアリング
こんにちは、Software Engineerの @yui_tang です。 3月7-8日にニューヨークにて開催されたAMP Conf 2017に参加してきましたので、そのレポートを書きたいと思います。 メルカリでのAMPの取り組み まずは、現在までのメルカリにおけるAMP(Accelerated Mobile Pages)の取り組みについて簡単にお話します。 2016年7月にメルカリのWebサイトの一部に導入を開始し、現在AMPページには数万PV/日のアクセスがあります。 メルカリ内の商品毎のページが全てAMP対応しているため、そのページ数は相当数に上ります。 流入経路ですが、現在元ページにlink rel="amphtml"を設定しているのみで、メルカリのサービス内にAMPページへのリンクは露出していません。 よって全てが検索流入となっており、事実上ランディング用のページとして機能して
Background tabs in chrome 57 | Blog | Chrome for Developers
Background tabs can have a dramatic negative effect on browser performance, especially on battery life. To mitigate this, Chrome has been placing various restrictions on background tabs for the last several years. Recently there’s been a number of efforts to make further improvements, and this document gives an overview of the Chrome policy. This document focuses on describing current policies in
「アニメーションPNG(APNG)」がGoogle ChromeのベースであるChromiumでサポート開始
By Linux Screenshots Googleが提供するウェブブラウザのGoogle Chromeは、オープンソースのウェブブラウザ開発プロジェクトである「Chromium」をベースとしています。そのChromiumが、新しくアニメーション画像フォーマットのひとつである「APNG」に対応したことを発表しました。 7d2b8c45afc9c0230410011293cc2e1dbb8943a7 - chromium/src - Git at Google https://chromium.googlesource.com/chromium/src/+/7d2b8c45afc9c0230410011293cc2e1dbb8943a7 ChromiumではPNG画像を「構造解析」と「デコード」の2段階にわけて解読することでAPNGに対応しているそうです。これにより、Google Chro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
