Giriş
Bir web sitesinde veya web uygulamasında görsellerin olması her zaman iyi bir fikirdir çünkü bunlar kullanıcının ilgisini çekmeye yardımcı olur, ancak bu görseller kullanıcının kaydırma yapmasına neden olacak kadar büyük olduğunda, tüm sayfayı bozarsa, tam tersi etki elde edilir.
Bu makalede, çeşitli olası yaklaşımları kullanarak görüntüleri React ile nasıl yeniden boyutlandıracağımızı öğreneceğiz.
React'ta görselleri yeniden boyutlandırmak, geleneksel HTML'deki görselleri yeniden boyutlandırmaya çok benzer çünkü CSS stillerini (dahili, satır içi veya harici stil) kullanırız. className
ya da style
bağlanmak. Ayrıca şunu da kullanabiliriz: height
ve width
üzerindeki nitelikler img
doğrudan etiketleyin.
Not: React'ta kullanmıyoruz class
HTML'de yaptığımız gibi bunun yerine şunu kullanırız: className
ile aynı işlevi yerine getiren sınıf ve dize değerlerini kabul eder.
Kod genellikle şu şekilde görünür:
<!-- index.css -->
img {
width: 500px;
height: 600px;
}
Ve imajımız şöyle görünecek:
<!-- App.js -->
import Logo from './images/react-logo.png';
import './index.css';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Not: Kullandığımız img
seçici olarak buna bir karar verebiliriz className
ve onu seçici olarak kullanın.
Satır İçi Stillerle Bir Görüntü Nasıl Yeniden Boyutlandırılır
Önceki örnekte harici stil kullandık, ancak tıpkı geleneksel HTML'de olduğu gibi, style
CSS stili ekleme özelliği. style
özellik değeri, anahtar/değer çiftlerine sahip bir JavaScript nesnesi olmalıdır:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img style={{ width: 500, height: 600 }} src={Logo} alt="React Logo" />
</div>
);
};
Varsayılan olarak temel birim pikseldir, ancak aşağıdaki gibi diğer birimleri de kullanmak istediğimizi varsayalım. rem
, %
, vh
, vb. Stillerin anahtar değeri için string'i kullanacağız:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img style={{ width: "500%", height: "600%" }} src={Logo} alt="React Logo" />
</div>
);
};
Benzer stile ihtiyaç duyan ve harici stil kullanmak istemeyen çok sayıda görselimiz varsa, bu stil nesnelerini tutacak bir nesne oluşturabilir ve ardından nesneyi styles
özellik:
import Logo from './images/react-logo.png';
const App = () => {
const myImageStyle = { width: '500px', height: '600px' };
return (
<div>
<img style={myImageStyle} src={Logo} alt="" />
</div>
);
};
Bir Görüntüyü Yeniden Boyutlandırma genişlik Ve yükseklik Özellikler
Geleneksel HTML'de görüntüleri yeniden boyutlandırmanın bir yolu, height
ve width
ile mülkiyet img
etiketidir ve bu aynı zamanda React ile de çalışır:
En iyi uygulamalar, endüstri tarafından kabul edilen standartlar ve dahil edilen hile sayfası ile Git'i öğrenmek için uygulamalı, pratik kılavuzumuza göz atın. Googling Git komutlarını durdurun ve aslında öğrenmek o!
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>
);
};
Bu yöntemin ana dezavantajı, yükseklik ve genişlikle oynamanın görüntüleri bozma eğiliminde olması, bunların küçülmesine, uzamasına veya başka şekilde oranlarını kaybetmesine neden olmasıdır. Bu kullanılarak düzeltilebilir object-fit: cover;
.
Görsellerimizi Şekillendirmek
Kullandığımızda height
, width
, max-height
ve görsellerimizi yeniden boyutlandırmak için kullanılan diğer CSS özellikleri, onları çarpıtma, küçültme veya uzatma eğilimi gösterir.
şunları eklemek her zaman iyi bir fikirdir: object-fit
Bir görüntünün kabına sığması için nasıl yeniden boyutlandırılması gerektiğini belirten özellik. Bu özellik aşağıdaki gibi çeşitli değerleri kabul edebilir: contain
, cover
, fill
, none
ve scale-down
.
Diğer CSS özellikleri, örneğin max-width
, min-width
, max-height
, ve min-height
, bir görüntünün alabileceği maksimum ve minimum değerleri tanımlayarak bozulmayı sınırlandırabilir.
Sonuç
Bu yazıda, elimizdeki çeşitli seçeneklere bakarak React'te görselleri nasıl yeniden boyutlandıracağımızı öğrendik.
Ancak bu değerleri dinamik olarak almak istediğinizde kesinlikle gerekli olmadıkça bu görüntülere sabit nitelikler ayarlamak yerine CSS stillerinin kullanılması tercih edilir; bu durumda satır içi stil de kullanılabilir.