Wordpress - CSS不把圖像放在圓圈內

-3

我使用精選文章和縮略圖插件，我編輯了插件的CSS文件（featured-post.css），使圖像顯示在圓圈內。這裏是我的代碼：Wordpress - CSS不把圖像放在圓圈內

ul#yiw-featured-post .featured-thumb {float:left;margin-right:1em; 
background-color: #F5F5F5;  
border: 1px solid #DDDDDD;  
border-radius: 50% 50% 50% 50%;  
padding: 4px; 
}

當我預覽頁面時，我可以看到圓圈，但它在圖像後面。這些圖像恰好位於圓圈的上方。我希望這些圖像能夠像Jetpack Circle Tiled Gallery的例子一樣被裁剪掉。我不知道要添加到代碼中才能正確調整圖像。

添加：它是一個插件，所以我使用小部件來顯示最近的帖子，所以沒有設置HTML，因爲圖像鏈接會根據顯示的文章而改變。但這裏是它看起來像現在：

<div id="widget_featured-posts-3" class="widget"><h5>Featured Posts</h5>  
<ul id="yiw-featured-post"> 
    <li class="first-child"> 
     <a href="http://herdailyfix.com/2013/10/its-the-relaunch/" class="featured-thumb"> 
         <img src="http://herdailyfix.com/wp-content/plugins/featured-post-with-thumbnail/scripts/timthumb.php?src=http://herdailyfix.com/wp-content/uploads/2013/10/hdf_bannerMay1.png&amp;h=300&amp;w=300&amp;zc=1" class="alignleft" alt="It’s The Relaunch!…"> 

       </a> 

     <h4 class="featured-title"> 
      <a href="http://herdailyfix.com/2013/10/its-the-relaunch/">It’s The Relaunch!…</a> 
     </h4> 
    </li> 
    <li> 
     <a href="http://herdailyfix.com/2011/07/monday-feature-do-you-fall-too-hard-too-soon/" class="featured-thumb"> 
         <img src="http://herdailyfix.com/wp-content/plugins/featured-post-with-thumbnail/scripts/timthumb.php?src=http://herdailyfix.com/wp-content/uploads/2010/07/black-couple.jpg&amp;h=300&amp;w=300&amp;zc=1" class="alignleft" alt="monday feature: Do You Fall Too Hard, Too Soon?"> 

       </a> 

     <h4 class="featured-title"> 
      <a href="http://herdailyfix.com/2011/07/monday-feature-do-you-fall-too-hard-too-soon/">monday feature: Do You Fall Too Hard, Too Soon?</a> 
     </h4> 
    </li> 
    <li class="last-child"> 
     <a href="http://herdailyfix.com/2013/11/the-best-man-holiday/" class="featured-thumb"> 
         <img src="http://herdailyfix.com/wp-content/plugins/featured-post-with-thumbnail/scripts/timthumb.php?src=http://herdailyfix.com/wp-content/uploads/2013/11/bestman.jpg&amp;h=300&amp;w=300&amp;zc=1" class="alignleft" alt="The Best Man Holiday: No Spoilers!"> 

       </a> 

     <h4 class="featured-title"> 
      <a href="http://herdailyfix.com/2013/11/the-best-man-holiday/">The Best Man Holiday: No Spoilers!</a> 
     </h4> 
    </li> 
</ul> 

</div>

來源

2014-06-04 geex

不能幫助，除非你提供相關螞蟻位的HTML。 –

@cale_b我添加了插件在網站上生成的代碼。這有幫助嗎？ – geex

確實如此 - 你已經有了答案，而且看起來不錯！ –

添加oveflow: hidden;到ul#yiw-featured-post .featured-thumb並添加此圖像錨定標記：

ul#yiw-featured-post .featured-thumb img { 
    border-radius: 50% 50% 50% 50%; 
    display: block; 
}

所以完整的代碼將是：

ul#yiw-featured-post .featured-thumb { 
    float:left; 
    margin-right:1em; 
    background-color: #F5F5F5; 
    border: 1px solid #DDDDDD; 
    border-radius: 50% 50% 50% 50%; 
    padding: 4px; 
    overflow: hidden; 
} 
ul#yiw-featured-post .featured-thumb img { 
    border-radius: 50% 50% 50% 50%; 
    display: block; 
}

這裏是演示：http://jsfiddle.net/6fAP5/

來源

2014-06-04 23:47:20

Wordpress - CSS不把圖像放在圓圈內

回答

相關問題