Sissejuhatus
Veebisaidil või veebirakenduses on alati hea visuaalid, kuna need aitavad kasutajat kaasata, kuid kui need pildid on nii suured, et kasutaja peab läbi kerima, moonutades kogu lehte, saavutab see vastupidise efekti.
Sellest artiklist õpime, kuidas Reactiga piltide suurust muuta, kasutades mitmeid võimalikke lähenemisviise.
Piltide suuruse muutmine Reactis on väga sarnane traditsioonilise HTML-i piltide suuruse muutmisega, kuna kasutame CSS-i stiile (kas sisemist, tekstisisest või välist stiili) className
või style
atribuut. Saame kasutada ka height
ja width
atribuudid peal img
märgi otse.
Märge: Reactis me ei kasuta class
nagu HTML-is, kasutame selle asemel className
, mis täidab sama funktsiooni kui klass ja aktsepteerib stringiväärtusi.
Kood näeks üldiselt välja midagi sellist:
<!-- index.css -->
img {
width: 500px;
height: 600px;
}
Ja meie pilt näeks välja selline:
<!-- App.js -->
import Logo from './images/react-logo.png';
import './index.css';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Märge: me kasutasime img
valijana võime otsustada anda sellele a className
ja kasutage seda valijana.
Kuidas muuta pildi suurust tekstisiseste stiilide abil
Eelmises näites kasutasime välist stiili, kuid nagu traditsioonilises HTML-is, saame kasutada ka style
atribuut CSS-stiili lisamiseks. The style
atribuudi väärtus peab olema võtme-väärtuste paaridega JavaScripti objekt:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img style={{ width: 500, height: 600 }} src={Logo} alt="React Logo" />
</div>
);
};
Vaikimisi on põhiühik pikslites, kuid oletame, et tahame kasutada muid ühikuid nagu rem
, %
, vh
jne. Kasutame stiilide võtmeväärtuse jaoks stringi:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img style={{ width: "500%", height: "600%" }} src={Logo} alt="React Logo" />
</div>
);
};
Kui meil on palju pilte, mis vajavad sarnast stiili ja me ei soovi kasutada välist stiili, võiksime luua objekti nende stiiliobjektide hoidmiseks ja seejärel lisada objekti styles
atribuut:
import Logo from './images/react-logo.png';
const App = () => {
const myImageStyle = { width: '500px', height: '600px' };
return (
<div>
<img style={myImageStyle} src={Logo} alt="" />
</div>
);
};
Kuidas muuta pildi suurust rakendusega laius And kõrgus Näitajad
Traditsioonilises HTML-is on üks piltide suuruse muutmise viise kasutada height
ja width
vara koos img
silt ja see töötab ka Reactiga:
Tutvuge meie praktilise ja praktilise Giti õppimise juhendiga, mis sisaldab parimaid tavasid, tööstusharus aktsepteeritud standardeid ja kaasas olevat petulehte. Lõpetage Giti käskude guugeldamine ja tegelikult õppima seda!
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>
);
};
Selle meetodi peamiseks puuduseks on see, et kõrguse ja laiusega sebimine kipub pilte moonutama, muutes need kokkutõmbumiseks, venimiseks või muul viisil oma suhte kaotamiseks. Seda saab parandada kasutades object-fit: cover;
.
Meie piltide kujundamine
Kui me kasutame height
, width
, max-height
ja muud CSS-i atribuudid meie piltide suuruse muutmiseks, kipuvad need neid moonutama, muutes need kokkutõmbumiseks või venimiseks.
Alati on hea mõte lisada object-fit
atribuut, mis määrab, kuidas tuleks pildi suurust konteinerisse mahutamiseks muuta. See majutusasutus võib aktsepteerida mitmesuguseid väärtusi, näiteks contain
, cover
, fill
, none
ja scale-down
.
Muud CSS-i omadused, nt max-width
, min-width
, max-height
ja min-height
, saab määrata maksimaalse ja minimaalse väärtuse, mida pilt võib tabada, piirates moonutusi.
Järeldus
Selles artiklis õppisime, kuidas Reactis piltide suurust muuta, vaadates erinevaid meile saadaolevaid valikuid.
Siiski on parem kasutada CSS-i stiile, selle asemel, et nendele piltidele fikseeritud atribuute seada, välja arvatud juhul, kui see on absoluutselt vajalik, kui soovite neid väärtusi dünaamiliselt vastu võtta. Sel juhul saab kasutada ka tekstisisest stiili.