HTML 5 адаптивен екран за слика на сликата img пропорционален код за скалирање за веб-страница HTML XNUMX

Поради растечкиот развој на мобилниот интернет,Wechat маркетингСо популарноста на мобилните телефони, мобилните телефони станааИвототАлатка што мора да ја имате.

изгради веб-локацијашаблон, се препорачува да се користиWordPressПриспособливи теми за:

Што значи CSS приспособливо слика?

CSS адаптацијата на слики се однесува на правење слики во html веб-страници имплементирани преку CSS код:

Следно,Чен ВајлијангЌе го споделам со вас кодот за пропорционално скалирање CSS img ^_^

Прилагодлив код за висина и ширина на сликата на CSS

Вметнете слика во html:

Ако сакате сликата да се прилагоди на големината на екранот, наместо да остане фиксирана во ширина и висина.

Можете да го додадете следниов код во датотеката style.css на вашата тема на WordPress ▼

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

Изјава овдеmax-widthправило за максимална ширина

• за да се осигура дека сите слики се прикажуваат на максимум 100% (т.е. може да се прикажат само колку самата слика).
• Во овој момент, ако елементот што ја содржи сликата (на пример, телото или div што ја содржи сликата) е помал од вродената ширина на сликата, сликата ќе се намали за да го пополни максималниот достапен простор.

width:auto;значи автоматска ширина

\9 Тоа е начин на пишување hack css.

• Овој метод додава „\9“ на обичниот css код. Само прелистувачот IE може да го препознае, другите прелистувачи ќе ја игнорираат оваа изјава.
• Ова ќе постигне диференцијација на прелистувачот и ќе ја овозможи целта на компатибилните прелистувачи.

Зошто да не користите ширина: 100%?

За да постигнете автоматско скалирање на сликите, можете да го користите и најчесто користениот атрибут ширина, како на прwidth：100％.

Сепак, ова правило не се применува овде.

• Затоа што ова правило ќе направи да изгледа широк колку и неговиот сад.
• Во случаи кога контејнерот е многу поширок од сликата, сликата ќе биде непотребно растегната.

мерки на претпазливост

Што се CSS селектори? Која е разликата помеѓу класа и id? Следното упатство ќе зборува за тоа ▼

Која е разликата помеѓу класата на избирач CSS и id? ИД и употреба на класа во HTML

Која е разликата помеѓу класата на избирач CSS и id? Употребата на ид и класа во HTML Чен Веилијанг неодамна врши оптимизација и ја оптимизира темата на WordPress на веб-страницата. Иако претходно научив некои основни знаења за HTML и CSS, не сум управувал со нив некое време, особено со делот CSS...

Како да ја прилагодите страницата при репродукција на MP4 видеа на мобилна веб-локација? Ве молиме кликнете на врската подолу ▼

Како да ја прилагодите веб-страницата H5 MP4 на страницата? Мобилната веб-страница репродуцира видео HTML код

Видео маркетингот е составен дел од онлајн маркетингот: многу практичари за онлајн промоција често користат видеа во комбинација со „вирусен маркетинг“ за да привлечат сообраќај. Ако маркетингот на WeChat се комбинира со видео маркетинг, може дополнително да ја подобри стапката на конверзија на пишување копии на новите медиуми и социјалната е-трговија. Имам многу пријатели...