CodeGym /Kurslar /Frontend SELF AZ /Adaptiv şəkillər

Adaptiv şəkillər

Frontend SELF AZ

Səviyyə , Dərs

Mövcuddur

5.1 srcset atributu

Adaptiv şəkillər responsive və optimallaşdırılmış veb-səhifələrin yaradılmasında mühüm rol oynayır. Bu, istifadə olunan cihaz və baxış şərtlərinə görə müxtəlif ölçü və keyfiyyətdə şəkillər yükləməyə imkan verir ki, bu da performansı və istifadədə rahatlığı artırır. HTML-də adaptiv şəkillərin tətbiqi üçün əsas alətlər srcset və sizes atributlarıdır.

srcset atributu müxtəlif ölçü ya da keyfiyyətlərə malik bir neçə şəkil mənbəyini göstərmək üçün istifadə olunur. Brauzer, istifadəçinin cihazına uyğun olan şəkli seçir.

Sintaksis:

    
      <img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Misal Şəkili">

Burada:

src: əsas şəkilin yolunu göstərir
srcset: vergüllərlə ayrılmış şəkillərin və onların xüsusiyyətlərinin siyahısını özündə saxlayır
1x, 2x: miqyaslama əmsalını göstərir (məsələn, 1x standart keyfiyyətə, 2x isə yüksək piksel sıxlığına malik cihazlara uyğundur)

srcset istifadəsi nümunəsi:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>srcset istifadəsi nümunəsi</title>
        </head>
        <body>
          <img
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            alt="Adaptiv şəkil nümunəsi">
        </body>
      </html>

Kodun izahı:

src="images/default.jpg": əsas şəkili göstərir
srcset: şəkillər siyahısını genişliklərinin (piksel olaraq) göstəriciləri ilə birlikdə saxlayır (480w, 800w, 1200w). Brauzer, pencərə genişliyinə uyğun olan şəkli seçir

5.2 sizes atributu

sizes atributu srcset ilə birgə istifadə olunur və müxtəlif görüntü şərtlərində şəkilin enini müəyyən edir. Bu, brauzerin ən uyğun şəkli daha dəqiq seçməsinə imkan verir.

Sintaksis:

HTML

    
      <img src="default.jpg"
      srcset="image1.jpg 480w, image2.jpg 800w"
      sizes="(max-width: 600px) 480px, 800px"
      alt="Nümunə şəkli">

Burada:

sizes: görüntü şərtləri və müvafiq şəkil enlərinin siyahısını ehtiva edir
(max-width: 600px) 480px: baxış pəncərəsinin eni 600px və ya daha azdırsa, eni 480px olan şəkili yüklə
800px: qalan hallarda eni 800px olan şəkili yüklə

sizes atributunun istifadə nümunəsi:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>sizes atributunun istifadə nümunəsi</title>
          <style>
            .responsive-img {
              width: 100%;
              max-width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
        <img
          class="responsive-img"
          src="images/default.jpg"
          srcset="images/image-small.jpg 480w,
            images/image-medium.jpg 800w,
            images/image-large.jpg 1200w"
          sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
          alt="Adaptiv şəkil nümunəsi">
        </body>
      </html>

Kod izahı:

sizes müxtəlif görüntü şərtlərində şəkilin enini təyin edir:

Baxış pəncərəsinin eni 600px və ya daha azdırsa, eni 480px olan şəkili yüklə
Baxış pəncərəsinin eni 900px və ya daha azdırsa, eni 800px olan şəkili yüklə
Qalan hallarda eni 1200px olan şəkili yüklə

5.3 Adaptiv şəkillər

Müxtəlif ekran ölçüləri üçün adaptiv şəkil

Atributlardan srcset və sizes istifadə edərək şəklin müxtəlif ekran ölçülərinə uyğunlaşdığı bir nümunə yaradacağıq.

Nümunə:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Adaptiv şəkil</title>
          <style>
            .responsive-img {
              width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
          <img
            class="responsive-img"
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            sizes="(max-width: 600px) 480px,
              (max-width: 900px) 800px,
              1200px"
            alt="Adaptiv şəklin nümunəsi">
        </body>
      </html>

Kodun izahı:

src="images/default.jpg": standart şəkli göstərir
srcset: müxtəlif genişliklərdə üç versiyanı müəyyən edir (480w, 800w, 1200w)
sizes: müxtəlif şərtlər üçün şəklin genişliyini müəyyən edir:
- 600px-ə qədər — 480px genişliyində şəkil istifadə edin
- 900px-ə qədər — 800px genişliyində şəkil istifadə edin
- 900px-dən çox — 1200px genişliyində şəkil istifadə edin
.responsive-img: CSS klası, şəklin genişliyini 100% və hündürlüyünü avtomatik edir, beləliklə, o mövcud yerə uyğunlaşır və proporasiyaları qoruyub saxlayır

Əvvəlki Əvvəlki dərs

Sonrakı Növbəti dərs

Şərhlər

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION