Languages
[Edit]
PL

React - skalowanie zawarto┼Ťci do rozmiaru kontenera (CSS transform scale)

3 points
Created by:
Lily
458

W tym artykule chcieliby┼Ťmy pokaza─ç, jak w Reakcie stworzy─ç komponent, kt├│ry skaluje zawarto┼Ť─ç (element potomny) do rozmiaru kontenera, zachowuj─ůc proporcje zawarto┼Ťci.

Takie podej┼Ťcie jest przydatne, je┼Ťli chcemy skalowa─ç jaki┼Ť element, kt├│ry musi mie─ç sta┼éy rozmiar, np. Google Ads w mobilnych przegl─ůdarkach internetowych. Kod pozwala nam ustawi─ç sta┼éy rozmiar tre┼Ťci, kt├│ry b─Ödzie skalowany do rozmiaru komponentu kontenera z zachowaniem proporcji - rozwi─ůzuje to problem elastycznych reklam GPT w przegl─ůdarce internetowej.

element iframe skalowany do rozmiaru kontenera
Element iframe skalowany do rozmiaru kontenera

Uwaga:

W tym artykule u┼╝ywamy┬ákomponentu┬áAutoSizer, kt├│ry pozwala na monitorowanie┬áaktualnego┬ározmiaru elementu. Opisywali┼Ťmy go ju┼╝ wcze┼Ťniej - tutaj.┬á

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poni┼╝sze linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const AutoSizer = React.memo(({ interval, children, ...other }) => {
	const reference = React.useRef();
	const [size, setSize] = React.useState();
	React.useEffect(() => {
      	let storedWidth = size?.width;
      	let storedHeight = size?.height;
      	const id = setInterval(() => {
          	const element = reference.current;
        	if (element) {
              	const width = element.offsetWidth;
                const height = element.offsetHeight;
              	if (width != storedWidth || height != storedHeight) {
                  	storedWidth = width;
                  	storedHeight = height;
                    setSize({ width, height });
                }
            }
        }, interval ?? 100);
      	return () => {
        	clearInterval(id);
        };
	}, [interval]);
	return (
	  <div ref={reference} {...other}>
        {size && children && children(size.width, size.height)}
	  </div>
	);
});

const ContentStretcher = ({sizerInterval, contentWidth, contentHeight, children, ...other}) => (
  <AutoSizer
    {...other}
    style={{
      ...other.style,
      position: 'relative',
      display: 'flex'
    }}
    interval={sizerInterval}
  >
    {(containerWidth, containerHeight) => {
  		const contentScale =
              containerHeight * contentWidth < containerWidth * contentHeight
        	? containerHeight / contentHeight
        	: containerWidth / contentWidth;
  		return (
          <div
            style={{
              position: 'absolute',
              left: '50%',
              top: '50%',
              transform: `translate(-50%, -50%) scale(${contentScale})`,
              transformOrigin: '50% 50%',
            }}
          >
            {children}
          </div>
        );
    }}
  </AutoSizer>
);

// Przykład:

// Utworzymy element iframe z dirask.com, kt├│ry zostanie przeskalowany do kontenera
// z zachowaniem proporcji tre┼Ťci.

const DiraskFrame = ({containerWidth, containerHeight, contentWidth, contentHeight}) => (
  <ContentStretcher
    style={{
        background: '#e1e1e1',
        width: `${containerWidth}px`,
        height: `${containerHeight}px`
    }}
    contentWidth={contentWidth}
    contentHeight={contentHeight}
  >
    <iframe
      src="https://dirask.com/about"
      style={{
        border: 'none',
        width: `${contentWidth}px`,
        height: `${contentHeight}px`
      }}
    />
  </ContentStretcher>
);

const App = () => (
  <div>
    <DiraskFrame
      containerWidth={100}
      containerHeight={100}
      contentWidth={200}
      contentHeight={200}
    />
    <br />
    <DiraskFrame
      containerWidth={300}
      containerHeight={300}
      contentWidth={200}
      contentHeight={200}
    />
    <br />
    <DiraskFrame
      containerWidth={300}
      containerHeight={200}
      contentWidth={150}
      contentHeight={150}
    />
    <br />
    <DiraskFrame
      containerWidth={200}
      containerHeight={300}
      contentWidth={150}
      contentHeight={150}
    />
  </div>
);

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Alternative titles

  1. React - skalowanie zawarto┼Ťci do rozmiaru diva
  2. React - rozci─ůganie zawarto┼Ťci do rozmiaru diva
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS (PL)

React - skalowanie zawarto┼Ťci do rozmiaru kontenera
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join