Reactで画像のサイズを変更する

概要

ウェブサイトやウェブアプリケーションにビジュアルを配置することは、ユーザーを引き付けるのに役立つため、常に良い考えですが、これらの画像が大きすぎてユーザーがスクロールしなければならない場合、ページ全体が歪んでしまい、逆の効果が得られます。

この記事では、いくつかの可能なアプローチを使用して、Reactで画像のサイズを変更する方法を学習します。

Reactでの画像のサイズ変更は、従来のHTMLでの画像のサイズ変更と非常によく似ています。これは、CSSスタイル（内部、インライン、または外部のいずれかのスタイル）を使用するためです。 className または style 属性。 使用することもできます height および width の属性 img 直接タグ付けします。

注： Reactでは使用しません class HTMLの場合と同じように、代わりに className、と同じ機能を実行します class 文字列値を受け入れます。

コードは通常、次の行に沿って何かに見えます。

<!-- index.css -->
img {
   width: 500px;
   height: 600px;
}

そして、私たちの画像は次のようになります。

<!-- App.js -->
import Logo from './images/react-logo.png';
import './index.css';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

注： 私たちが使った img セレクターとして、私たちはそれに与えることを決めることができます className そしてそれをセレクターとして利用します。

インラインスタイルで画像のサイズを変更する方法

前の例では外部スタイルを使用しましたが、従来のHTMLと同様に、 style CSSスタイルを追加する属性。 The style 属性値は、キーと値のペアを持つJavaScriptオブジェクトである必要があります。

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: 500, height: 600 }} src={Logo} alt="React Logo" />
      </div>
   );
};

デフォルトでは、基本単位はピクセル単位ですが、次のような他の単位を利用したいとします。 rem, %, vh、など。スタイルのキー値に文字列を使用します。

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: "500%", height: "600%" }} src={Logo} alt="React Logo" />
      </div>
   );
};

同様のスタイルを必要とし、外部スタイルを使用したくない画像が多数ある場合は、これらのスタイルのオブジェクトを保持するオブジェクトを作成してから、そのオブジェクトをに追加できます。 styles 属性：

import Logo from './images/react-logo.png';

const App = () => {
   const myImageStyle = { width: '500px', height: '600px' };

   return (
      <div>
         <img style={myImageStyle} src={Logo} alt="" />
      </div>
   );
};

で画像のサイズを変更する方法 幅 高さ Attributes

従来のHTMLでは、画像のサイズを変更するXNUMXつの方法は、 height および width とプロパティ img タグとこれはReactでも機能します：

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
          <img src={Logo} width="500" height="600" alt="" />
          
          <img src={Logo} width={500} height={600} alt="" />
      </div>
   );
};

この方法の主な欠点は、高さと幅をいじると画像が歪む傾向があり、画像が縮小、拡大、または比率が失われることです。 これは、を使用して修正できます object-fit: cover;.

画像のスタイリング

私たちが使用するとき height, width, max-height、および画像のサイズを変更するための他のCSSプロパティでは、画像が歪む傾向があり、縮小または拡大します。

を含めることは常に良い考えです object-fit プロパティ。コンテナに合わせて画像のサイズを変更する方法を指定します。 このプロパティは、次のようなさまざまな値を受け入れることができます。 contain, cover, fill, none および scale-down.

などの他のCSSプロパティ max-width, min-width, max-height, min-height、画像がヒットできる最大値と最小値を定義して、歪みを制限できます。

まとめ

この記事では、利用可能なさまざまなオプションを見て、Reactで画像のサイズを変更する方法を学びました。

ただし、これらの値を動的に受け取りたい場合に絶対に必要な場合を除いて、これらの画像に固定属性を設定するよりも、CSSスタイルを使用することをお勧めします。その場合はインラインスタイルも使用できます。