CSS yordamida moslashuvchan fotogalareya yaratish

CSS yordamida moslashuvchan fotogalareya yaratish

d8dadb
Ushbu maqolada moslashuvchan fotogalareyani CSS ning o’zida yaratishni ko’ramiz. Moslashuvchan galareyada rasmlar o’lchami va maket ekran razmeriga avtomatik moslashishi kerak. Ushbu usulni men Turkcha-O’zbekcha Lug’at ilovasida foydalandim.

Portrait rejimda:
3d5e18

Landscape rejimda:
e6a6c3

Agar siz moslashuvchan web dizayn haqida uncha yaxshi bilmasangiz, ushbu maqolani o’qishdan oldin Moslashuvchan web dizayn haqidagi maqolalarni o’qib chiqishingizni maslahat beraman.

Avval quidagi fotogalareya demo variantini oching va brovzer razmerini asta-sekin o’zgartiring. Brovzer kichiklashayotganda, ustunlar soni kamayishi, rasm o’lchami ekran o’lchamiga mos ravishda o’zgarishini ko’rasiz. Agar tablet yoki smartfoningiz bo’lsa, buni qurilmangizda ham tekshirib ko’ring. Agar bunday qurilmangiz bo’lmasa, unda protofluid.com mobil qurilma va tabletlarda mobil web sahifalarni tekshirish uchun ajoyib sayt(xuddi emulyator kabi).
Ushbu sayt yordamida olingan natija:
14485d

Moslashuvchan kvadratlar yasash

Bizni proektimizni asosi moslashuvchan kvadratlardir — ya’ni kvadratlar maketga nisbatan avtomatik vertikal va gorizontal ravishda o’zgaradi. Bunda biz DIV lardan foydalanamiz va width(eni)ni foiz(%) larda qilamiz.
Masalan, width: 25% bo’lgan div yaratamiz. Div eni 25% bo’ladi, bu 25% ni qayerdan oladi? 25% shu div parentidan oladi. Agar shu divni to’g’ridan-to’g’ri body ichiga joylasak quidagi natija hosil bo’ladi:

Moslashuvchan kvadrat

d9a6e4
Agar biz divga height: 25%; qo’shsak:
843870
Agar brovzerni kichiklashtirsangiz, div balandligi brovzer balandligiga, eni brovzer eniga bog’langanini ko’rishingiz mumkin. Bu yaxshi, lekin, biz shaklni kvadrat bo’lishini hohlaymiz. Shuning uchun, height: 25%; o’rniga, padding-bottom:25%; ni qo’yamiz, natijada div har doim kvadrat shaklida bo’ladi.
f59f45
Endi brovzerni razmerini o’zgartirsak ham kvadrat saqlanib qoladi. Lekin, hali ish tugamadi. Yuqorida e’tibor qilgan bo’lsangiz, matn olib tashlangan. Agar matnni joylashtirsak, matn balandligi + padding-bottom bo’ladi, va div balandligi uzunlashib ketadi.

4a6148

Bu muammoni hal qilish uchun biz bu div ichiga yana bir div qo’yamiz va unga position: absolute o’rnatamiz. Bu holda, ichki div(inner-box) joylashuvi butun sahifa(body)ga bog’lanib qoladi. Tashqi div(box)ni position: relative qilamiz. Bu absolute joylashuvni butun sahifaga emas, balkim uning tashqarisida turgan elementga bog’liq qiladi.



Agar div ichiga matn joylashtirsak, kvadratlik yo'qoladiva balandligi uzunlashadi

31598a

Grid yaratish
Biz, moslashuvchan kvadrat yaratib oldik, endi biz kvadratlar to’plamidan iborat GRID yaratib olishimiz kerak. Buning uchun, hamma kvadrat boxlarni bitta id=’wrapper’ divga joylashtiramiz va wrapper divga overflow: hidden; va boxga float:left; stilini beramiz (Demo). Demoni oching va brovzeringiz razmerini o’zgaritirib ko’ring.

Gridni moslashuvchan qilish
Biz gridni yaratdik, ammo uni katta ekranda ochsak kvadratlar judayam katta, kichik ekranda ochsak kvadratlar kichkini ko’rinishda chiqyapdi. Shu joyda css media so’rovlar yordamida gridni moslashuvchan qilamiz. Ya’ni ekran o’lchamiga bog’liq holda, har bir kvadrat eni(width) va padding-bottom o’zgarishi kerak. Quidagi css kod 300, 400, 780, 1000, 1290 va 1490 oraliqdagi ekranlarni o’z ichiga oladi(demo).

/* agar ekran 300 */
	@media only screen and (max-width : 300px){
      /* Smartphone view: 1 qator */
      .box {
        width: 98%;
        padding-bottom: 98%;
      }
    }
	
    @media only screen and (max-width : 400px) and (min-width : 301px){
      /* Smartphone view: 2 qator */
      .box {
        width: 48%;
        padding-bottom: 48%;
      }
    }
    
    @media only screen and (max-width : 780px) and (min-width : 401px) {
      /* Small desktop / ipad view: 3 qator */
      .box {
        width: 32%;
        padding-bottom: 32%;
      }
    }
	
    @media only screen and (max-width : 1000px) and (min-width : 781px) {
      /* Medium desktop: 4 qator */
      .box {
        width: 24%;
	padding-bottom: 24%;
      }
    }
	
	@media only screen and (max-width : 1290px) and (min-width : 1001px) {
      /* Medium desktop: 5 qator */
      .box {
        width: 19%;
	padding-bottom: 19%;
      }
    }
	
	@media only screen and (max-width : 1490px) and (min-width : 1291px) {
      /* Medium desktop: 6 qator */
      .box {
        width: 15%;
	padding-bottom: 15%;
      }
    }

3c16b1

Bu kod, IE ning 8 va undan eski versiyalarida ishlamaydi. Buning uchun quidagi kodni qo’shish kerak:


Nihoyat gridni moslashuvchan qildik, agar brovzer o’lchamini judayam kichik qilsangiz, kvadratlar faqat bir qatorga joylasadi. Kengaytirib borganiz sari, qatorlar soni oshib boradi. Mana shu moslashuvchanlik deyiladi.

Asosiy qism: fotogalareya
Endi yuqorida o’rganganlarimiz yordamida galareyani yaratamiz. Bizda 12 ta rasm bor, va har bir rasm 460 px kvadrat.
HTML kod



		
	
	
	Moslashuvchan foto galareya


...