div中的img標籤多餘空白bug解決方案

2021-07-15 09:05:36 字數 1228 閱讀 3917

上圖之前之後:

原圖是這樣的:

發現區別了吧,這裡用到了css3的object-fit屬性為cover(保持原有尺寸比例。保證替換內容尺寸一定大於容器尺寸,寬度和高度至少有乙個和容器一致。因此,此引數可能會讓替換內容(如)部分區域不可見。)

之前不知道這個屬性的時候還傻傻寫js判斷==

img.onload = function

());

height = $(".preview img")[0].clientheight;

num = (height-100)/2;

$(".preview>img").css();

$(".preview>img").css();

}else

if(height".preview>img").css();

width = $(".preview img")[0].clientwidth;

num = (width-100)/2;

$(".preview>img").css();

$(".preview>img").css();}};

注:-100的原因是因為我的灰色框為100px*100px

呃,其實我想說的重點是div中的img標籤多餘空白bug解決方案。

在做專案的時候,遇到這樣的問題:

呵嘿,上面有個白條對吧

有3種解決方案,感覺下面這3種最實用啦:

1、給設定

img

img

img

img標籤下多餘空白BUG解決方法

在進行頁面的div css排版時,遇到ie6 當然有時firefox下也會偶遇 瀏覽器中的元素img下出現多餘空白的問題絕對是常見的 對於該問題的解決方法也是 見機行事 1 將轉換為塊級物件 即,設定img為 display block 在本例中新增一組css sub img 2 設定的垂直對齊方式...

div標籤裡放img標籤時候遇到的坑

專案遇到div標籤裡放img標籤的情況,div的width height 都已經設定好,img的width height 為100 但是發現渲染出來的img超出了div的高度,如下圖 後來嘗試了下發現應該給div設定line height 和height的大小一樣 這樣渲染出來的img才不會超過di...

解決 IE6 下 img 多餘 5 個畫素的空白

最近的實踐中,越來越覺得 li 標籤中包含 a img 標籤的時候會比較麻煩,需要注意。當然,問題還是一如既往的出現在 ie 下。以下為其中一例 css code ul ul li 其中 temp.jpg 尺寸為 277 57 firefox 下的正常表現 ie6 下的非正常表現 很明顯地可以看到 ...