修复博主黑色图像

Question

在我的网站（howtoplaystation.com）上，右侧热门帖子的图像被黑色包围。有人可以帮我解决这个问题吗？ enter image description here

我尝试了一些 CSS 代码，但没有帮助。

.PopularPosts .item-thumbnail {
    width: initial;
    height: 70px;
}

.PopularPosts ul li img {
    object-fit: fill !important;
}

我希望完整的图像在圆圈中，而不是被黑色包围。

Answer 1

通过更改此删除框阴影：

.PopularPosts .item-thumbnail img {
    background: #f3f3f3;
    height: 60px;
    width: 60px;
    border: 1px solid #fff;
    padding: 3px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
}

对此：

.PopularPosts .item-thumbnail img {
    background: #f3f3f3;
    height: 60px;
    width: 60px;
    border: 1px solid #fff;
    padding: 3px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
}

Answer 2

我要解决这个问题的一种方法是：

改变这个：

.PopularPosts .item-thumbnail a {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0;
}

对此：

.PopularPosts .item-thumbnail a {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #fff;
}

还有这个：

.PopularPosts .item-thumbnail img {
    background: #f3f3f3;
    height: 60px;
    width: 60px;
    border: 1px solid #fff;
    padding: 3px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
}

对此：

.PopularPosts .item-thumbnail img {
    background: #f3f3f3;
    height: 60px;
    width: 60px;
    padding: 3px;
    object-fit: cover;
    transform: scale(1.65);
}

基本上，更改父元素的边框、半径和大小，并添加一个适合对象并稍微缩放图像以隐藏图像本身的那些黑色条纹。

就我个人而言，我也会将边框颜色更改为白色以外的任何颜色，因为主要元素的背景也是浅色，所以可能会使用天蓝色代替此边框，但这是个人喜好。

修复博主黑色图像

Fix blogger black images

html

blogger