爲什麼我的圖片沒有遵循divs類？

Question

我很新的HTML，這裏是我的代碼：

.social-media { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 25px; 
 
}

<div class="social-media"> 
 
    <a href="https://twitter.com/mytwitter" target="_blank"> 
 
    <img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png" alt="my twitter"> 
 
    </a> 
 
</div>

Twitter的圖像不從CSS改變

Answer 1

試試這個：

.social-media img { 
    height: 100px; 
    width: 100px; 
    border-radius: 25px; 
    } 

Answer 2

爲圖像添加單獨的樣式，使其佔據父級的整個寬度

.social-media { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 25px; 
 
    } 
 
    .social-media img{ 
 
    width: 100%; 
 
    }

<div class="social-media"> 
 
    <a href="https://twitter.com/mytwitter" target="_blank"><img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png" alt="my twitter"></a> 
 
</div>

Answer 3

你的CSS不是直接針對圖像：

1. 給你的圖片ID或類，所以你的目標是明確

.social-media-image { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 25px; 
 
}

<div class="social-media"> 
 
    <a href="https://twitter.com/mytwitter" target="_blank"> 
 
    <img class="social-media-image" src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png" alt="my twitter"> 
 
    </a> 
 
</div>

您可以將圖像直接從社交媒體類目標

.social-media img { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 25px; 
 
}

<div class="social-media"> 
 
    <a href="https://twitter.com/mytwitter" target="_blank"> 
 
    <img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png" alt="my twitter"> 
 
    </a> 
 
</div>

退房link如何CSS選擇工作