div不受css影響

Question

我正在使用 html 和 css 來制作網站。

我制作了一個 div 並為其分配了一個類。 我稱該類為profile_pic 。 當我在 CSS 中對該類進行更改時，沒有任何變化。 帶有類的 div 不受 CSS 影響，我不知道為什么。

如果我將類放在 img 標記中，那么更改將適用。 但是當我把類放回那個 div 時，變化就消失了。 有人可以解釋發生了什么嗎？

 .profile_pic { width: 50px; height: 50px; object-fit: cover; border-radius: 25px; display: inline-block; }

 <div class="profile_pic"> <img src="https://via.placeholder.com/100"> </div> <div> <img class="profile_pic" src="https://via.placeholder.com/100"> </div>

Answer 1

這些更改確實適用。 如果您使用瀏覽器檢查元素，您可以看到這一點。 他們在第一個示例中似乎沒有的原因是因為您沒有將圖像限制在 div 中。 例如，如果您使用overflow: hidden來執行此操作，那么您會看到它有效。

一個小問題是，由於對象匹配適用於“替換元素”（例如圖像），而不是結構元素（例如 div），因此您的圖像位置在第一種情況下會發生偏移。 您可以通過對圖像應用 100% 的寬度來解決此問題。

 .profile_pic { width: 50px; height: 50px; object-fit: cover; border-radius: 25px; display: inline-block; overflow: hidden; } .profile_pic img { max-width: 100%; }

 <div class="profile_pic"> <img src="https://via.placeholder.com/100"> </div> <div> <img class="profile_pic" src="https://via.placeholder.com/100"> </div>

Answer 2

顯示使用clip-path的替代方法：

 .profile_pic { display: flex; width: 50px; height: 50px; clip-path: circle(25px); }

 <div class="profile_pic"> <img src="https://via.placeholder.com/100"> </div>