Question

我正在使用带有缩略图插件的精选帖子，我编辑了插件的CSS文件（featured-post.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>

Answer 1

将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/

Wordpress - CSS不会将图像置于圆圈内

1 个答案: