Код пропорционального масштабирования изображения HTML 5 для адаптивного экрана img для веб-страницы HTML XNUMX

В связи с бурным развитием мобильного интернета,Вичат маркетингПопулярность мобильных телефонов сталажизньобязательный инструмент.

Постройте станциюшаблон, рекомендуется использовать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% (т. е. они могут отображаться только такого размера, как их собственные изображения).
• На этом этапе, если элемент, содержащий изображение (например, body или div, содержащий изображение), меньше ширины, присущей изображению, изображение будет масштабироваться, чтобы заполнить максимально доступное пространство.

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

\9 Это способ написания хак css.

• Таким образом, "\9" добавляется к обычному коду css, его может распознать только браузер IE, другие браузеры проигнорируют это утверждение.
• Это обеспечит дифференциацию браузеров, что позволит использовать совместимые браузеры.

Почему бы не использовать ширину: 100%?

Чтобы добиться автоматического масштабирования изображений, вы также можете использовать более часто используемые свойства ширины, например.width：100％.

Однако здесь это правило не действует.

• Потому что это правило сделает его таким же широким, как и его контейнер.
• В случаях, когда контейнер намного шире изображения, изображение будет излишне растянуто.

注意 事项

Что такое селекторы CSS? В чем разница между классом и идентификатором?В следующих руководствах рассказывается о ▼

В чем разница между классом селектора CSS и идентификатором? использование идентификатора и класса в HTML

В чем разница между классом селектора CSS и идентификатором? Использование идентификатора и класса в HTML Чен Вейлян в настоящее время выполняет SEO и оптимизирует тему WordPress на веб-сайте.Хотя я уже изучил некоторые базовые знания HTML и CSS, но какое-то время я не использовал их, особенно часть CSS...

Как мобильный веб-сайт воспроизводит видео в формате MP4, адаптированное к странице?Пожалуйста, нажмите на ссылку ниже ▼

Как веб-страница H5 MP4 адаптируется к странице Мобильный веб-сайт воспроизводит видео html-код

Видеомаркетинг является неотъемлемой частью онлайн-маркетинга: многие специалисты по онлайн-продвижению часто используют видео в сочетании с «вирусным маркетингом» для привлечения трафика.Если маркетинг WeChat сочетается с видеомаркетингом, это может еще больше повысить коэффициент конверсии копирайтинга в новых медиа и социальной электронной коммерции.У меня много друзей...