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 селекторите? Каква е разликата между клас и идентификатор?Следващите уроци говорят за ▼

Каква е разликата между класа на CSS селектор и id? използване на идентификатор и клас в HTML

Каква е разликата между класа на CSS селектор и id? Използването на id и class в HTML Chen Weiliang в момента извършва SEO и оптимизира темата на WordPress на уебсайта.Въпреки че научих някои основни познания по HTML и CSS преди, но не съм работил с тях от известно време, особено CSS частта...

Как мобилният уебсайт възпроизвежда MP4 видео адаптивно към страницата?Моля, щракнете върху връзката по-долу ▼

Как H5 уеб страницата MP4 се адаптира към страницата? Мобилният уебсайт възпроизвежда видео html код

Видео маркетингът е неразделна част от онлайн маркетинга: много практикуващи онлайн промоция често използват видео в комбинация с „вирусен маркетинг“, за да стимулират трафик.Ако маркетингът на WeChat се комбинира с видео маркетинг, той може допълнително да подобри коефициента на реализация на копирайтинг в новите медии и социалната електронна търговия.Имам много приятели...