ウェブページ上の小さなスペースに大きな画像を配置する方法

ウェブページ上の小さなスペースに大きな画像を配置する方法

出典: www.bamagazine.com

ウェブページのバナー、ニュースの見出しの周りのスペース、コラム広告など、狭いスペースはどこにでもありますが、カメラで撮った写真はそれよりはるかに大きく、典型的なスケールは 6 x 4 インチです。二人の関係をどう捉えていますか?この記事では、3 つの解決策を紹介します。

1. ニュースタイトル:

タイトル部分に大きな写真を使いたいのですが、どうすればいいでしょうか?

1. 大胆なカット:

写真の余白が、貼り付けたい部分と同じ幅であれば、写真に大胆なカットを入れることも可能です。小さな写真でも大きな写真の本質を伝えることができるというのは、あなたにとって興味深いことかもしれません。

写真の焦点を選択し、そこに切り抜きを適用します。驚かれるかもしれませんが、スライスの幅が狭ければ狭いほど、写真の迫力が増します。

上の写真を見るだけで、私たちの目は次のようなさまざまな情報を素早く受け取ることができます。

  • 年齢
  • 性別
  • 彼らの髪の毛
  • 彼らの衣服
  • 彼らの表現;
  • 彼らの関係;

そして、これらすべてがまさに私たちが必要としているものなのです!

トリミングされた画像は、退職サービスに関するこの記事のタイトルに使用されました。効果は非常に良く、元の大きな画像を使用するよりも優れています

前のページ1 2 3 次のページ 続きを読む

<<:  React の 10 個のフックの紹介

>>:  Docker Compose を使用して Confluence を構築するチュートリアル

推薦する

Linux で Apache を使用してファイル サーバーを構築する手順

1. ファイルサーバーについてプロジェクトでは、公開ソフトウェアやデータをプロジェクト チーム メン...

SpringBoot プロジェクトの Docker 環境を実行するときに発生する無限再起動問題の詳細な説明

もしかしたら私の考え方が間違っていたのかもしれないし、問題の説明が少し乱雑だったのかもしれないが、こ...

エラー 1045 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されました (パスワード使用: YES) 実用的な解決策

昨日はデータベースへの接続に問題はありませんでしたが、今日はデータベースへの接続時にこのエラーが報告...

HTML テーブルの行間および列間の操作 (rowspan、colspan)

一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...

Visual Studio Code + Reactをベースに開発環境を構築するプロセス

開発環境ウィンドウ開発ツール Visual Studio Codeノードのインストールとnpm Wi...

地域のカスタムカラーのためのechars 3Dマップソリューション

目次質問伸ばす問題を解決する要約する質問プロジェクトの要件に従って、以下の州地図で個々の都市を(異な...

CSS--overflow:hidden のプロジェクト例

以下は、私のプロジェクトでこのプロパティを使用する方法の例です。 (1)激しく透明な浮遊コードをコピ...

MySQLの実行原理、論理階層化、データベース処理エンジンの変更について詳しく説明します

長い間 MySQL を使ってきたので、SQL 文はすでに覚えていると思います。そこで、その実行原理を...

mysql 5.7.11 winx64 初期パスワード変更

公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...

vue-router 4 の使用例の詳しい説明

目次1. インスタンスをインストールして作成する2. vue-router4の新機能2.1 動的ルー...

17の広告効果測定の解釈

1. 広告の 85% は未読です<br />解釈: 成功する広告の 15% にどうやって...

JSタイマーを使用して要素を移動する

JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の...

MySQLデータベースがNULLを可能な限り避ける理由

MySQL の多くのテーブルには、NULL が列のデフォルト属性であるため、アプリケーションが NU...

MySQL トリガーの定義と使用方法の簡単な例

この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...

CSS で要素フローティングとクリアフローティングを実装する方法

フローティングの基礎標準ドキュメント フローでは、要素は塊級元素と行內元素の 2 種類に分けられます...