關於img標籤的處理

2021-10-06 13:40:56 字數 793 閱讀 6788

0x00 寫在最前

目前網頁並沒有乙個完美的img解決方案,若需要完美按照要求顯示可以使用ps或者裁剪來實現;

0x01 自適應

將父元素div加入以下**

display:flex;

align-items:center;

justify-content:center;

im**平填充

width:100%

height:auto;

img垂直填充

width:auto;

height:100%;

0x02 css裁剪首先設定html時設定width或height,讓按比例縮小;//假如這次的是400*300

然後在css中設定以下屬性(img的容器)

width:100px;

height:100px;

overflow:hidden;

position: relative;

0x03 clip裁剪將img設定絕對定位就可以使用clip裁剪了

img

img標籤的運用

網頁中常見的影象格式大體上有三種,jpg,gif和png 有失真壓縮,色彩豐富,隱藏一些無用的資訊,只保留有用的部分。簡單動畫,背景透明。無失真壓縮,透明,交錯,動畫 使用img標籤,此標籤單獨出現 alt 的替換文字,當無法開啟時,網頁會自動顯示alt的內容來代替 1 html 2 head ti...

多個Img標籤之間的間隙處理方法

1.多個標籤寫在一行 alt 鬱金香 alt 鬱金香 height 100px alt 鬱金香 alt 鬱金香 height 100px 效果前 效果後 2.將要閉合標籤的地方與開始標籤的地方重合 alt 鬱金香 alt 鬱金香 height 100px 3.使用注釋頭尾相連 alt 鬱金香 alt...

img標籤的onerror事件

當不存在時,將觸發 onerror,而 onerror 中又為 img 指定乙個logoerror.png 也就是說存在則顯示logo.png,不存在將顯示 logoerror.png。但問題來了,如果logoerror.png 也不存在,則繼續觸發 onerror,導致迴圈,故會出現開啟網頁時提示...