React로 이미지 크기 조정하기

개요

웹 사이트나 웹 응용 프로그램에 시각적 개체를 두는 것은 사용자의 참여를 유도하는 데 도움이 되기 때문에 항상 좋은 생각이지만 이러한 이미지가 너무 커서 사용자가 스크롤해야 하고 전체 페이지가 왜곡되면 반대 효과가 나타납니다.

이 기사에서는 몇 가지 가능한 접근 방식을 사용하여 React로 이미지 크기를 조정하는 방법을 배웁니다.

React에서 이미지 크기 조정은 CSS 스타일(내부, 인라인 또는 외부 스타일 지정)을 사용하기 때문에 기존 HTML의 이미지 크기 조정과 매우 유사합니다. className 또는 style 기인하다. 우리는 또한 사용할 수 있습니다 height 및 width 속성 img 직접 태그합니다.

참고 : React에서는 사용하지 않습니다. class 대신 HTML에서 하는 것처럼 className, 와 동일한 기능을 수행합니다. 수업 문자열 값을 허용합니다.

코드는 일반적으로 다음 라인을 따라 보입니다.

<!-- 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 스타일을 추가하는 속성. 그만큼 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>
   );
};

이미지 크기를 조정하는 방법 폭 Audiencegain과 신장 Attributes

기존 HTML에서 이미지 크기를 조정하는 한 가지 방법은 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 스타일을 사용하는 것이 좋습니다. 이 경우 인라인 스타일도 사용할 수 있습니다.