HTML 5 сүрөттүн ийкемдүү экраны HTML XNUMX веб-баракчасынын пропорционалдуу масштабдоо коду

Мобилдик интернеттин өнүккөндүгүнө байланыштуу,Wechat маркетингиУюлдук телефондордун популярдуулугу менен уюлдук телефондор болуп калдыжашооБолушу керек курал.

веб-сайт куруушаблон, аны колдонуу сунушталатWordPressЫңгайлаштырылган темалар:

CSS сүрөт ыңгайлашуусу эмнени билдирет?

CSS сүрөтүн адаптациялоо CSS коду аркылуу ишке ашырылган html веб баракчаларында сүрөттөрдү жасоону билдирет:

Кийинки,Чен ВейлянМен сиз менен CSS img пропорционалдык масштабдоо кодун бөлүшөм ^_^

CSS сүрөтүнүн бийиктиги жана туурасы ийкемдүү код

Сүрөттү htmlге кыстарыңыз:

Эгер сиз сүрөттүн туурасы жана бийиктиги боюнча туруктуу бойдон калбастан, экрандын өлчөмүнө ылайыкташуусун кааласаңыз.

Сиз төмөнкү кодду WordPress темаңыздын style.css файлына кошо аласыз ▼

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

Бул жерде билдирүүmax-widthмаксималдуу туурасы эрежеси

• бардык сүрөттөр 100% максимум менен көрсөтүлүшүн камсыз кылуу үчүн (б.а. алар сүрөттүн өзүндөй чоңдукта гана көрсөтүлүшү мүмкүн).
• Бул учурда, эгер сүрөттү камтыган элемент (мисалы, сүрөттү камтыган корпус же div) сүрөттүн эндигинен кичине болсо, сүрөт максималдуу жеткиликтүү мейкиндикти толтуруу үчүн масштабдалат.

width:auto;автоматтык туурасын билдирет

\9 Бул hack css жазуу ыкмасы.

• Бул ыкма кадимки css кодуна "\9" кошот.Бир гана IE браузери аны тааный алат, башка браузерлер бул билдирүүнү этибарга албайт.
• Бул браузерди дифференциациялоого жетишет жана шайкеш браузерлердин максатын иштетет.

Эмне үчүн width:100% колдонбойсуз?

Сүрөттөрдүн автоматтык масштабын жетүү үчүн, сиз, мисалы, кеңири таралган атрибутун колдоно аласызwidth：100％.

Бирок, бул эреже бул жерде колдонулбайт.

• Анткени бул эреже аны өзүнүн контейнериндей кенен кылып көрсөтөт.
• Контейнер сүрөттөлүштөн бир топ кененирээк болгон учурларда, сүрөт ашыкча созулат.

Коопсуздук чаралары

CSS селекторлор деген эмне? Класс менен id ортосунда кандай айырма бар? Төмөнкү окуу куралы бул тууралуу сөз болот ▼

CSS селектор классы менен id ортосунда кандай айырма бар? HTMLде id жана класстын колдонулушу

CSS селектор классы менен id ортосунда кандай айырма бар? HTML'де id жана классты колдонуу Чен Вейлян жакында SEO жүргүзүп, веб-сайттын WordPress темасын оптималдаштырууда. Мен буга чейин бир нече негизги HTML жана CSS билимдерин үйрөнсөм да, мен аны бир аздан бери иштете элекмин, айрыкча CSS бөлүгү...

Мобилдик веб-сайтта MP4 видеолорун ойнотууда баракчаны кантип ыңгайлаштыруу керек? Төмөнкү шилтемени басыңыз ▼

H5 веб-баракчасы MP4 баракчага кантип ыңгайлашат Мобилдик веб-сайт видео html кодун ойнойт

Видео маркетинг онлайн маркетингдин ажырагыс бөлүгү болуп саналат: көптөгөн онлайн жарнамалоочулар трафикти тартуу үчүн видеолорду "вирустук маркетинг" менен айкалыштырышат. Эгерде WeChat маркетинги видеомаркетинг менен айкалышса, ал жаңы медианын жана социалдык электрондук коммерциянын копирайтингди конвертациялоо курсун дагы жакшыртат. Менин досторум көп...