網頁HTML 5圖片自適應屏幕img等比例縮放大小代碼

由於移動互聯網蓬勃發展、微信營銷的普及，手機已是生活中必備的工具。

蓋站的模板，推薦使用WordPress的自適應主題：

CSS 圖片自適應什麼意思？

CSS圖片自適應是指讓html 網頁中的圖片，通過CSS代碼實現：

接下來，陳溈亮會給你分享CSS img 等比例縮放大小代碼^_^

CSS image高度和寬度自適應代碼

在html中插入圖像：

如果你希望圖像自適應屏幕的小，而不是在寬度和高度上保持固定不變。

可以將以下代碼，添加到WordPress主題的 style.css 文件中 ▼

/*图片自适应宽度和高度*/ 
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選擇器是什麼？ class跟id有什麼區別？以下教程就有說到 ▼

CSS選擇器class跟id有什麼區別？ HTML中id和class用法

CSS選擇器class跟id有什麼區別？ HTML中id和class用法陳溈亮最近在執行SEO，優化網站的WordPress主題。雖然之前有學過一些基礎的HTML 和CSS 知識，但是一段時間沒有操作，尤其是CSS部分……

手機端網站播放MP4視頻如何自適應頁面？請點擊以下鏈接 ▼

H5網頁MP4如何自適應頁面?手機端網站播放視頻html代碼

視頻營銷是網絡營銷的組成部分：很多網絡推廣從業者經常用視頻結合“病毒式營銷”來引流量。若微信營銷結合視頻營銷，能進一步提升新媒體和社交電商的文案轉化率。有不少朋友……