React ile Görüntüleri Yeniden Boyutlandırma

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: classNameile 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:

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-heightve 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.