Сүрөттөр желе мазмунун түзүүнүн маанилүү компоненти болуп саналат, анткени алар маалыматты визуалдык жактан жагымдуу түрдө жеткире алышат. HTML барагына сүрөттөрдү кошкондо, визуалдык жактан тең салмактуу презентация үчүн алардын туура тегизделгенин жана борборлоштурулганын камсыз кылуу зарыл. Бул макалада биз HTMLде сүрөттөрдү кантип борборлоштуруу процессин майда-чүйдөсүнө чейин изилдеп, бул ыкманы өздөштүрүү үчүн практикалык мисалдарды келтиребиз. Сүрөттөрүңүздүн көрүнүшүн жакшыртууга даяр болуңуз сиздин долбоорлоруңузда желе!
1. HTMLдеги сүрөттөрдү тегиздөө менен таанышуу
HTMLдеги сүрөттөрдү тегиздөө веб-баракчаларды долбоорлоодо маанилүү аспект болуп саналат. Туура тегизделген сүрөт беттин көрүнүшүн жана визуалдык агымын жакшыртып, колдонуучунун жагымдуу жана кесипкөй тажрыйбасын камсыздай алат.
HTMLде сүрөттөрдү тегиздөөнүн бир нече жолу бар. Эң кеңири таралганы - "текстти тегиздөө" CSS касиетин "борбор", "сол" же "оң" мааниси менен колдонуу. Бул сүрөттү курчап турган тексттин ортосуна, солуна же оң жагына тегиздейт. Мисалы:
«`
«`
Ошондой эле HTML "тегиздөө" теги аркылуу сүрөттөрдү тегиздөө мүмкүн. Бул тег "сол", "оң" жана "борбор" маанилерин кабыл алат, бирок HTML5тен бери эскирген деп эсептелет. Ошондуктан, анын ордуна CSS колдонуу сунушталат. Бирок, эски браузерлерди колдоо керек болсо, сиз дагы эле тегиздөө тегин колдоно аласыз. Мисалы:
«`
«`
Көрүүсү начар адамдар үчүн альтернативдүү сүрөттөмө берүү үчүн сүрөттөрүңүздө "alt" атрибуттарын колдонуу маанилүү экенин унутпаңыз. Ошондой эле, тегиздөөлөрдү ашыкча колдонуудан алыс болуңуз, анткени бул сиздин баракчаңыздын окулушуна жана структурасына терс таасирин тийгизиши мүмкүн. Ар кандай варианттар менен эксперимент жасап, дизайныңызга эң туура келген тегиздөөнү табыңыз.
2. HTMLдеги сүрөттү тегиздөөнүн негиздери
Алар долбоорлоодо эске алынуучу негизги аспект болуп саналат веб-сайт. Сүрөттөрдү туура тегиздөө беттин визуалдык көрүнүшүн жана колдонуучу тажрыйбасын жакшыртат. Төмөндө HTMLдеги сүрөттөрдү тегиздөө үчүн кадамдар:
1. ` тегин колдонуңуз` сүрөттү HTML кодуңузга киргизүү үчүн. Сервериңиздеги сүрөттүн жолун көрсөтүү үчүн `src` атрибутун көрсөтүүнү унутпаңыз. Сүрөттүн өлчөмүн тууралоо үчүн сиз "туура" жана "бийиктик" атрибуттарын колдоно аласыз. Мисалы:
"`html
«`
2. Сүрөттү горизонталдуу тегиздөө үчүн, `тегдеги `тегиздетүү` атрибутун колдонсоңуз болот.`. Бул атрибут `»сол»`, `»оң»` жана `»центр»` маанилерин колдойт. Мисалы:
"`html
«`
3. Эгерде сиз сүрөттү вертикалдуу тегиздегиңиз келсе, анда ` тегиндеги `vertical-align` атрибутун колдонсоңуз болот.`. Бул атрибут `»жогорку»`, `»орто»` жана `»төмөн»` маанилерин колдойт. Мисалы:
"`html
«`
Булар алардын айрымдары гана. Веб баракчаңыздагы сүрөттөрдүн көрүнүшүн көбүрөөк ыңгайлаштыруу жана көзөмөлдөө үчүн CSSти да колдонсоңуз болорун унутпаңыз. Керектүү натыйжаны алуу үчүн атрибуттардын жана стилдердин ар кандай айкалыштары менен эксперимент жасаңыз.
3. Сүрөттөрдү тегиздөө үчүн HTML тэгдери
HTML тэгдери веб-баракчанын дизайны жана түзүлүшү үчүн негизги курал болуп саналат. Алар сунуш кылган өзгөчөлүктөрдүн бири - сүрөттөрдү так тегиздөө мүмкүнчүлүгү. Бул бөлүмдө бул максатка жетүү үчүн эң көп колдонулган тегдер каралат.
Биз колдоно турган биринчи тег болуп саналат . Бул тег биздин веб-баракчага сүрөттү киргизүүгө мүмкүндүк берет. Сүрөттү туурасынан тегиздөө үчүн, биз "сол" же "оң" маанилери менен тегиздөө атрибутун колдоно алабыз. Мисалы, биз сүрөттү солго тегиздегибиз келсе, кодду колдоно алабыз
. Эгерде биз аны оңго тегиздегибиз келсе, анда "сол" ордуна "оң" маанисин колдонобуз.
Сүрөттөрдү тегиздөөнүн дагы бир варианты тегди колдонуу болуп саналат
. Ошентип, сүрөт div ичинде борборго тегизделет.
Акыр-аягы, биз тегди колдоно алабыз
.
4. CSS стилдерин колдонуу менен сүрөттөрдү кантип борборлоштуруу керек
CSS стилдерин колдонуу менен сүрөттөрдү борборлоштуруунун бир нече жолу бар. Төмөндө буга жетүү үчүн кеңири колдонулган үч ыкма:
1. Автоматтык маржа: Сүрөттү борборлоштуруунун оңой жолу - сол жана оң жактарга автоматтык чек коюу. Бул төмөнкү CSS эрежени колдонуу менен жетишүүгө болот: margin: 0 auto;. Бул касиеттин жардамы менен сүрөт анын контейнеринин горизонталдуу борборуна жайгаштырылат.
2. Флексбокс: Сүрөттөрдү борборлоштуруунун дагы бир натыйжалуу ыкмасы - flexbox колдонуу. Башкы контейнерге төмөнкү CSS эрежелерин колдонуу менен: display: flex; y justify-content: center;, сүрөт контейнердин горизонталдуу борборуна жайгаштырылат. Бул учурда контейнер белгиленген туурасы же 100% туурасы болушу керек экенин эске алыңыз.
3. Өзгөртүү: CSS трансформация касиети сүрөттөрдү борборлоштуруу үчүн да колдонулушу мүмкүн. Буга жетүү үчүн төмөнкү CSS эрежесин сүрөткө колдонсо болот: transform: translateX(-50%);. Бул сүрөттү туурасынын 50% солго жылдырып, аны контейнердин ортосуна жайгаштырат. Мындан тышкары, бул контейнер мүлккө ээ экенин камсыз кылуу үчүн маанилүү болуп саналат position: relative; трансформация туура колдонулушу үчүн.
Булар гана экенин унутпаңыз кээ бир мисалдар CSS аркылуу сүрөттөрдү кантип борборлош керек. Методдорду ар бир долбоордун өзгөчө муктаждыктарына ылайыкташтыруу жана ар кандай браузерлер менен шайкештикти эске алуу маанилүү.
5. HTMLдеги сүрөттөрдү борборлош үчүн CSS касиеттерин колдонуу
HTMLдеги сүрөттөрдү борборлош үчүн, ар кандай CSS касиеттерин колдонсо болот. Төмөндө эң кеңири тарагандардын айрымдары келтирилген:
1. "Flex" мааниси бар "дисплей" касиетин сүрөт контейнерине туурасынан жана тигинен борборлоштуруу үчүн колдонсо болот. Мисалы:
"`html
«`
2. Дагы бир вариант - "текстти тегиздөө" касиетин сүрөт контейнериндеги "борбор" мааниси менен бирге колдонуу. Бул ыкма сүрөттү туурасынан гана борборлойт. Мисалы:
"`html
«`
3. Эгерде сиз сүрөттү горизонталдуу гана борборлоштурууну кааласаңыз, анда "маржа" касиетин сүрөт контейнеринин сол жана оң тарабында "auto" маанилери менен колдоно аласыз. Ошентип:
"`html
«`
Бул CSS касиеттерин колдонуу менен HTMLде сүрөттөрдү борборлоштуруунун жолдорунун айрымдары гана. түзүлүшүнө жараша веб-сайт жана конкреттүү талаптардан эң ылайыктуу техниканы тандап алса болот. Бул чечимдерди ар бир долбоордун дизайнына жана стилине ылайыкташтыруу үчүн өзгөртүүгө жана тууралоого болорун унутпаңыз жана сиз үчүн эң жакшы вариантты табыңыз!
6. HTMLде сүрөттү борборлоштуруунун өркүндөтүлгөн ыкмалары
HTMLде сүрөттөрдү так жана көзөмөлдөнүүчү түрдө борборлоштуруу үчүн колдонула турган бир нече өнүккөн ыкмалар бар. Бул ыкмалар веб-дизайнерге визуалдык жагымдуу көрүнүшкө жетишүүгө жана сүрөттөрдүн курчап турган мазмун менен туура тегиздешине кепилдик берет.
Көбүнчө колдонулган ыкма "маржа: авто" CSS касиетин сүрөттүн туурасын орнотуу менен бирге колдонуу. Буга жетүү үчүн, жөн гана сүрөт үчүн белгиленген туурасын коюп, андан кийин ага "маржа: авто" касиетин колдонуңуз. Бул сүрөттү өз контейнеринде туурасынан ортого салат.
Сүрөттөрдү борборлоштуруунун дагы бир өнүккөн ыкмасы - flexbox колдонуу. Flexbox - бул контейнер ичиндеги элементтерди автоматташтырылган тартипте иретке келтирүүгө жана тегиздөөгө мүмкүндүк берген ийкемдүү макет модели. Flexbox аркылуу сүрөттү борборлоштуруу үчүн, сиз сүрөттү контейнерге ороп, контейнерге төмөнкү CSS касиеттерин колдонушуңуз керек: "display: flex", "justify-content: center" жана "align-items: center". Бул сүрөттү контейнердин ортосуна вертикалдуу жана туурасынан тегиздейт.
Бул ыкмалардан тышкары, HTMLде сүрөттөрдү борборлоштуруу үчүн колдонула турган башка өнүккөн ыкмалар бар, мисалы, "позиция: абсолюттук" касиетин "жогорку: 50%" жана "сол: 50%" маанилери менен айкалыштыруу, андан кийин сүрөттүн ордун туура өзгөртүү үчүн CSS трансформациясы. Бирок, бул ыкмалар татаалыраак жана CSS боюнча тереңирээк билимди талап кылат. Кыскача айтканда, алар веб-баракчанын визуалдык көрүнүшүн кыйла жакшыртып, сүрөттөрдү тегиздөөдө көбүрөөк ыңгайлаштырууга жана тактыкка мүмкүндүк берет.
7. HTMLде сүрөттөрдү борборлоштурууда жалпы көйгөйлөрдү оңдоо
HTMLде сүрөттөрдү борборлоштурууда бир нече жалпы көйгөйлөр бар, бирок бактыга жараша, алардын ар бири үчүн жөнөкөй жана натыйжалуу чечимдер бар. Эгер сиз HTML кодуңузда сүрөттү туура тегиздөөдө көйгөйгө туш болуп жатсаңыз, маселени чечүү үчүн бул кадамдарды аткарыңыз:
1. Сүрөттү контейнердин ичинде борборлоштуруу үчүн "текстти тегиздөө" CSS касиетин колдонуңуз. Сүрөт контейнерине туура келген CSS селекторундагы "текстти тегиздөө" касиетине "центр" маанисин колдонууну унутпаңыз. Мисалы:
"`html
«`
2. Эгерде сүрөт дагы эле ортого түшпөсө, анын туурасы контейнердин туурасынан аз же барабар экенин текшериңиз. Сиз тиешелүү селектордогу CSS width касиетин колдонуп, сүрөттүн туурасын орното аласыз. Мисалы:
"`html
«`
3. Сүрөт контейнерден чоңураак болсо жана сиз анын автоматтык түрдө туура келишин кааласаңыз, сиз CSS касиетин "макс-эни" "100%" мааниси менен колдоно аласыз. Бул сүрөттүн пропорциясын жоготпостон, контейнерге туура келүү үчүн кичирейтүүгө мүмкүндүк берет. Мисал:
"`html
«`
Бул кадамдарды аткаруу менен, сиз HTMLде сүрөттөрдү борборлоштурууда көпчүлүк көйгөйлөрдү чече аласыз. Селекторлорду жана файл аталыштарын өзүңүздүн кодуңузга ылайыкташтырууну унутпаңыз. Эгерде сүрөттөр дагы эле туура тегизделбесе, кодуңузду мүмкүн болгон каталарды текшерип, CSS стилдери туура колдонулуп жатканын текшериңиз.
8. HTMLде сүрөттөрдү борборлоштурууда жеткиликтүүлүктү эске алуу
HTML'де сүрөттөрдү борборлоштурууда маанилүү жагдай - бул барактын бардык адамдарга, анын ичинде көрүү мүмкүнчүлүгү чектелгендерге жеткиликтүү болушун камсыз кылуу. HTMLде сүрөттөрдү борборлоштурууда тийиштүү жеткиликтүүлүккө жетүүгө жардам бере турган бир нече ыкмалар бар.
Муну жасоонун бир жолу - сүрөт тэгдериндеги альтернативалуу (alt) атрибуттарды колдонуу. Alt атрибуту сүрөт жүктөлбөй калганда же аны экрандан окуучу окуганда көрсөтүлүүчү сүрөттөмө текстти камсыз кылат. Аны көрө албаган адамдар анын мазмунун түшүнүшү үчүн сүрөттүн так сүрөттөлүшүн берүү маанилүү.
Дагы бир жагдай HTMLде семантикалык тегдерди колдонуу. Сүрөттөрдү борборлоштурууда, мисалы, тиешелүү тегдерди колдонуу максатка ылайыктуу
Жеткиликтүүлүк куралдарын жана текшергичтерди колдонуу менен барактын жеткиликтүүлүгүн текшерүү маанилүү. Бул куралдар мүмкүн болуучу көйгөйлөрдү аныктап, жеткиликтүүлүктү жакшыртуу боюнча сунуштарды бере алат. Сүрөттөрдү борборлоштуруу үчүн колдонулган түстөр бардык адамдарга, өзгөчө көрүүсү начар адамдарга көрүнүп турушу үчүн жетиштүү контрастка ээ болушу керектигин эстен чыгарбоо керек. Бул жеткиликтүүлүк эске алуу менен, сиз бардык колдонуучулар үчүн жеткиликтүү жана түшүнүктүү болгон HTML борборлоштурулган сүрөттөрдү туура көрсөтүүгө жетише аласыз.
9. HTMLде сүрөттөрдү борборлоштуруу боюнча мыкты тажрыйбалар
HTMLдеги сүрөттөрдү борборлоштуруу веб-баракчаларды долбоорлоодо кеңири таралган иш. Төмөндө сүрөттөрүңүздү эффективдүү борборлоштуруу үчүн кээ бир мыкты тажрыйбалар келтирилген.
1. Этикетті колдонуңуз баракка сүрөттөрүңүздү киргизүү үчүн HTML. Тегдин src атрибутунда сүрөткө туура жолду бергениңизди текшериңиз. Мисалы:
.
2. Сүрөттү горизонталдуу борборлоштуруу үчүн, сиз "маржа" CSS касиетин "авто" жана "дисплей" маанилери "бөгөттөө" деп койсоңуз болот. Ошентип, сүрөт контейнердин ортосуна жайгаштырылат. Стил файлыңызга төмөнкү CSS кодун кошуңуз: img { display: block; margin-left: өзү; маржа-оң: өзү; }
3. Эгерде сиз сүрөттү туурасынан да, тигинен да борборлоштурууну кааласаңыз, flexbox ыкмасын колдонсоңуз болот. Сүрөт контейнерине төмөнкү CSS эрежелерин колдонуңуз: .container { display: flex; негиздөө-мазмун: борбор; тегиздөө: борбор; }. Бул ыкма менен сүрөт контейнердин ичинде туурасынан да, тигинен да борборго жайгаштырылат.
Баракчаңызда борборлоштурулган сүрөттөрдү колдонуу көрүнүштү жана колдонуучу тажрыйбасын жакшыртууга жардам берерин унутпаңыз. Бул практикаларды аткаруу менен, сиз HTML сүрөттөрүңүз үчүн эффективдүү жана жагымдуу борборлоштурууга жетише аласыз. Ар кандай ыкмаларды сынап көрүп, аларды өзүңүздүн өзгөчө муктаждыктарыңызга жараша тууралоодон тартынбаңыз!
10. Ар кандай түзмөктөрдө жана экрандарда сүрөттөрдү тегиздөө стратегиялары
Веб-сайтты иштеп чыгууда негизги көңүлдөрдүн бири - сүрөттөрдүн туура тегиздигин текшерүү ар кандай түзмөктөр жана экрандар. Бул колдонуучулар колдонгон түзмөктөр болушу мүмкүн болгон ар кандай өлчөмдөр жана токтомдордон улам өзгөчө маанилүү. Төмөндө сүрөттү туура тегиздөө үчүн он стратегия бар ар кандай түзмөктөрдө жана экрандар:
1. Медиа сурамдарды колдонуңуз: Медиа сурамдары аспаптын өзгөчөлүктөрүнө жараша белгилүү CSS стилдерин колдонууга мүмкүндүк берет. Алар ар кандай экран өлчөмдөрүндөгү сүрөттөр үчүн ар кандай өлчөмдөрдү, позицияларды жана чектерди коюу үчүн колдонулушу мүмкүн.
2. Пайыздарды же салыштырмалуу бирдиктерди колдонуңуз: Сүрөттөрдүн өлчөмүн көрсөтүү үчүн пиксел сыяктуу туруктуу өлчөөлөрдү колдонуунун ордуна, пайыздарды же "em" же "rem" сыяктуу салыштырмалуу бирдиктерди колдонуу сунушталат. Бул бирдиктер экрандын өлчөмүнө жараша автоматтык түрдө туураланып, сүрөттүн туура тегиздөөсүн камсыздайт.
3. Жооптуу сүрөттөрдү колдонуңуз: Жооптуу сүрөттөр экрандын өлчөмүнө жараша автоматтык түрдө туураланып, алардын ар кандай түзмөктөрдө туура тегизделишине кепилдик берет. Буга жетишүү үчүн, HTMLде "srcset" атрибутун колдонуу же CSS'те "фон-өлчөм" касиетин колдонуу сыяктуу ыкмаларды колдонсо болот.
4. Сүрөттөрдүн өлчөмүн жана форматын оптималдаштыруу: Сүрөттөрдүн өлчөмүн жана форматын оптималдаштыруу маанилүү, алар ар кандай түзмөктөрдө тез жүктөлөт. Сүрөттү кысуу куралдарын колдонуу жана сапаты менен файлдын өлчөмүнүн ортосунда жакшы байланышты сунуш кылган JPEG же WebP сыяктуу форматтарды колдонуу сунушталат.
5. Ар кандай түзмөктөрдө жана браузерлерде сынаңыз: Сүрөттөр туура тегиздөө үчүн бардык түзмөктөрдө жана браузерлер, кеңири тестирлөө талап кылынат. Мүмкүн болгон тегиздөө көйгөйлөрүн аныктоо үчүн экрандын ар кандай өлчөмдөрүндө, мобилдик түзмөктөрдө жана популярдуу браузерлерде сынап көрүү сунушталат.
6. Жооптуу алкактарды же китепканаларды колдонуңуз: Ар кандай түзмөктөрдө сүрөттөрдү тегиздөө процессин жеңилдете турган ар кандай жооп берүүчү алкактар жана китепканалар бар. Кээ бир популярдуу опциялар Bootstrap, Foundation жана Bulma болуп саналат, алар ар кандай экран өлчөмдөрүндө туура көрсөтүү үчүн оптималдаштырылган алдын ала аныкталган компоненттерди жана стилдерди сунуштайт.
7. Сүрөттөр жеткиликтүү болушун текшериңиз: Веб-сайтты иштеп чыгууда жеткиликтүүлүктү эске алуу маанилүү жана бул сүрөттөргө да тиешелүү. Сүрөттү жүктөө же экранды окугуч окуй албаса, анда көрсөтүү үчүн альтернативалуу текстти көрсөтүү үчүн сүрөт тэгдеринде "alt" атрибутун колдонуу сунушталат.
8. Сүрөттөрдү мажбурлап тегиздөөдөн качыңыз: Сүрөттөрдү тегиздөөчү CSS стилдерин колдонуудан качуу сунушталат, анткени бул ар кандай түзмөктөрдө жана экрандарда көйгөйлөрдү жаратышы мүмкүн. Салыштырмалуу өлчөөлөрдү колдонуу жана сүрөттөрдүн экрандын өлчөмүнө жараша табигый тууралоосуна уруксат берүү артык.
9. Терс мейкиндикти карап көрөлү: Терс мейкиндик, ошондой эле ак аралык катары белгилүү, сүрөттөрдү туура тегиздөө үчүн маанилүү болуп саналат. Сүрөттөрдү ар кандай түзмөктөрдө же экрандарда көргөндө кесилип калбашы үчүн же туура эмес тегиздөө үчүн алардын айланасында адекваттуу чекти калтыруу сунушталат.
10. Дайыма мониторинг жүргүзүү жана тууралоо: Сүрөттөрдү түрдүү түзмөктөрдө жана экрандарда жайгаштыруу жана тегиздөө үзгүлтүксүз процесс. Сүрөттөрүңүздүн бардык түзмөктөрдө туура көрүнүшүн камсыз кылуу үчүн аларды дайыма көзөмөлдөп, тууралап туруу жана зарыл болсо өзгөртүүлөрдү киргизүү маанилүү.
Бул стратегиялар менен ар кандай түзмөктөрдө жана экрандарда сүрөттөрдү туура тегиздөөгө жетишүүгө болот. Бул кадамдарды аткаруу сиздин веб-сайтыңыздын коноктору кандай түзмөк колдонбосун оптималдуу колдонуучу тажрыйбасын камсыздайт.
11. HTMLдеги сүрөттөрдү тегиздөө үчүн пайдалуу куралдар жана ресурстар
HTMLде сүрөттөрдү так тегиздөө кыйынга турат, бирок бул процессти жеңилдете турган бир нече пайдалуу куралдар жана ресурстар бар. Төмөндө HTMLдеги сүрөттөрдү тегиздөөңүзгө жардам бере турган кээ бир ыкмалар жана ыкмалар бар натыйжалуу:
1. “Text-align” CSS касиетин колдонуу: Сиз “текстти тегиздөө” CSS касиетин колдонуп, сүрөттөрдү текст менен сыза аласыз. Бул үчүн, сүрөттү div сыяктуу блок элементине ороп, андан кийин контейнерге "текстти тегиздөө" касиетин колдонуңуз. Мисалы, сиз сүрөттү солго тегиздегиңиз келсе, төмөнкү кодду колдонсоңуз болот:
"`html
«`
2. "Float" CSS касиетин колдонуңуз: Дагы бир вариант - HTMLдеги сүрөттөрдү тегиздөө үчүн "float" CSS касиетин колдонуу. Сиз "сол" жана "оң" маанилерин колдонуп, сүрөттү солго же оңго сүзө аласыз. Мисалы:
"`html
«`
3. Сүрөттөрдү Flexbox менен тегиздөө: Эгер сиз ийкемдүү жана динамикалык тегиздөөнү кааласаңыз, Flexboxту колдонсоңуз болот. Flexbox элементтердин тегиздөөсүн жана жайгашуусун өнүккөн башкарууга мүмкүндүк берген CSS макетинин модели. Сиз CSS flexbox касиеттерин колдонуп туурасынан да, тигинен да тууралоону тууралай аласыз. Сүрөттү туурасынан тегиздөө үчүн Flexboxту кантип колдонуунун негизги мисалы:
"`html
«`
12. HTMLде сүрөттү борборлоштуруунун практикалык мисалдары
Бул макалада биз сизге HTMLде сүрөттөрдү борборлоштуруунун 12 практикалык мисалын сунуштайбыз. Сүрөттөрдү кантип борборлоштурууну билүү веб-баракчаларды же блогдорду долбоорлоодо пайдалуу, анткени ал мазмундун визуалдык көрүнүшүн жана окулушун жакшыртат. Кийинки, биз сизге бул эффектке жетүү үчүн ар кандай ыкмаларды көрсөтөбүз.
1. HTML атрибуттары бар сүрөттү борборлоштуруу: Сүрөттү борборлоштуруунун эң негизги ыкмасы HTML "тегиздөө" жана "стиль" атрибуттарын колдонуу. Мисалы, сиз HTML кодуңуздагы img элементине төмөнкү код сабын кошо аласыз: align=”center”. Бул сүрөттү беттин горизонталдуу ортосуна жайгаштырат.
2. CSS менен сүрөттү борборлоштуруу: Сүрөттү борборлоштуруунун дагы бир жолу - CSS колдонуу. Сиз борборлоштурууну каалаган сүрөттөр үчүн атайын CSS классын түзүп, аны HTML кодундагы img элементине колдоно аласыз. Мисалы, сиз төмөнкү CSS кодун колдоно аласыз:
«`
«`
Андан кийин, HTML кодуңузда img элементине "борбордук сүрөт" классын кошуңуз:
«`
«`
3. Flexbox аркылуу сүрөттү борборлоштуруу: Flexbox - бул элементтердин абалын жана жайгашуусун көбүрөөк көзөмөлдөөгө мүмкүндүк берген веб-баракчаларды долбоорлоонун өнүккөн ыкмасы. Flexbox аркылуу сүрөттү борборлоштуруу үчүн, аны контейнерге ороп, андан кийин контейнерге кээ бир CSS касиеттерин колдонушуңуз керек. Мисалы, сиз төмөнкү CSS кодун кошо аласыз:
«`
«`
Андан кийин, HTML кодуңузда сүрөтүңүздү контейнерге ороп алыңыз:
«`
«`
Бул HTMLде сүрөттөрдү кантип борборлоштуруунун бир нече мисалдары. Методду тандоо сиздин муктаждыктарыңызга жана каалоолоруңузга жараша болот. Аларды сынап көрүңүз жана долбооруңузга эң туура келгенин табуу үчүн эксперимент жасаңыз. Веб дизайныңызга ийгилик!
13. HTMLде сүрөттөрдү борборлоштурууда аткарууну оптималдаштыруу
HTMLде сүрөттөрдү борборлоштурууда майнаптуулукту оптималдаштыруу үчүн бир нече ыкмаларды колдонсо болот. Төмөндө биз буга жетүүгө жардам бере турган кээ бир варианттарды сунуштайбыз натыйжалуу:
Биринчиден, сүрөттү борборлоштуруунун кеңири таралган жолу ` тэгин колдонуу
Альтернатива - сүрөттү ортого салуу үчүн CSS стилдерин колдонуу. Сүрөткө `display: block` касиетин колдонсоңуз болот, андан кийин аны туурасынан да, тигинен да борборлоштуруу үчүн автоматтык маанилер менен `margin` касиетин колдонсоңуз болот. Мисалы:
"`html
«`
Дагы бир вариант - элементтерди ийкемдүү бөлүштүрүүгө жана борборлоштурууга мүмкүндүк берген CSS дизайн ыкмасы болгон flexbox колдонуу. Flexbox менен сүрөттү борборлоштуруу үчүн, төмөнкү кодду колдонсоңуз болот:
"`html
«`
Бул HTMLде сүрөттөрдү борборлоштуруунун бир нече ыкмалары натыйжалуу жол. Ишти оптималдаштыруу маанилүү экенин унутпаңыз сиздин веб-сайтыңыз, ошондуктан биз сиздин муктаждыктарыңызга жана дизайн талаптарына ылайык эң ылайыктуу ыкмаларды колдонууну сунуштайбыз.
14. HTMLде сүрөттөрдү борборлоштуруу боюнча жыйынтыктар жана акыркы сунуштар
HTMLде сүрөттөрдү борборлоштуруу үчүн, сиз колдоно турган бир нече ыкмалар бар. Төмөндө бул максатка жетүү үчүн кээ бир акыркы корутундулар жана сунуштар бар.
Биринчиден, бир вариант CSSте "текстти тегиздөө" касиетин колдонуу. Сиз бул касиетти сүрөттүн контейнер элементине колдоно аласыз, анын маанисин "борборго" коюуга болот. Ошентип, сүрөт контейнердин ичинде туурасынан борборго жайгаштырылат.
Дагы бир альтернатива - "div" тегин колдонуу түзүү сүрөт үчүн контейнер жана конкреттүү CSS стилдерин колдонуңуз. Сүрөттү горизонталдуу борборлоштуруу үчүн, сиз контейнердин сол жана оң четин "авто" деп коюп, сүрөттүн туурасы контейнердин туурасынан ашпасын камсыздай аласыз. Кошумчалай кетсек, аны вертикалдуу борборлоштуруу үчүн "дисплей" касиетин "flex" мааниси менен жана "align-items" касиетин "центр" мааниси менен колдоно аласыз.
Акырында, эгер сиз HTML элементиндеги фон сүрөтүн ортого салгыңыз келсе, CSS'те background-position касиетин колдонсоңуз болот. Сүрөттү туурасынан да, тигинен да борборлоштуруу үчүн "борбордун" маанилерин орното аласыз. Ошондой эле, эгер сиз сүрөттүн фондо кайталанышын кааласаңыз, анда "background-repeat" касиетин "no-repeat" мааниси менен колдонсоңуз болот.
Кыскача айтканда, HTML'де сүрөттөрдү борборлоштуруу үчүн, сиз CSS'те текстти тегиздөө касиетин колдоно аласыз, белгилүү CSS стилдери менен контейнер түзсөңүз же фон сүрөттөрү үчүн background-position касиетин колдонсоңуз болот. Бул параметрлер сизге керектүү эффектке жетүү жана веб-сайтыңыздагы визуалдык элементтериңиздин көрүнүшүн жакшыртууга мүмкүндүк берет.
Жыйынтыктап айтканда, HTMLде сүрөттөрдү борборлоштуруу - бул тиешелүү касиеттерди жана атрибуттарды колдонуу менен аткарыла турган салыштырмалуу жөнөкөй иш. Бул макалада биз HTMLде сүрөттөрдү борборлоштуруунун ар кандай ыкмаларын изилдедик, алар align атрибутун колдонуудан баштап, CSS стилдерин колдонууга чейин.
Ар бир ыкма өзүнүн болушу мүмкүн экенин эстен чыгарбоо керек артыкчылыктары жана кемчиликтери кырдаалга жана ар бир долбоордун өзгөчө муктаждыктарына жараша. Мындан тышкары, ар кандай браузерлер жана HTML версиялары менен шайкештигин эске алуу керек.
Сүрөттөрдү борборлоштурууда HTML тэгдерин жана атрибуттарын, ошондой эле дизайндын жана макеттин негиздерин жакшы түшүнүү зарыл. Ошо сыяктуу эле, жакшы тажрыйбага ээ болуу абдан маанилүү веб иштеп чыгуу сайттын натыйжалуулугун жана натыйжалуулугун камсыз кылуу.
Сүрөттөрдү борборлоштуруу түзүү жана долбоорлоо үчүн зарыл болгон көндүмдөрдүн жана ыкмалардын кичинекей гана бөлүгү экенин унутпаңыз веб-сайттар адистер. HTML жана CSS менен үйрөнүүнү жана экспериментти улантуу сизге бул куралдарды өздөштүрүү жана веб-иштеп чыгуу чөйрөсүндөгү билимиңизди кеңейтүүгө мүмкүндүк берет.
Бул макала HTMLде сүрөттөрдү кантип борборлоштурууну түшүнүүгө жардам берди жана бул теманы андан ары изилдөө үчүн бекем негиз берди деп үмүттөнөбүз. Визуалдык элементтердин веб-сайтка кандайча шайкеш интеграцияланганын көрүү дайыма кызыктуу жана сүрөттү борборлоштуруу, албетте, жетишүү үчүн баалуу чеберчилик. Келечектеги HTML долбоорлоруңузга ийгилик жана үйрөнүүнү уланта бериңиз!
Мен Себастьян Видал, технологияга жана өз алдынча жасоого кызыккан компьютер инженеримин. Андан тышкары, мен жаратуучумун tecnobits.com, мен технологияны баарына жеткиликтүү жана түшүнүктүү кылуу үчүн окуу куралдарын бөлүшөм.