时间戳

首页 > 解决方案 > 修复博主黑色图像

html - 修复博主黑色图像

问题描述

在我的网站 (howtoplaystation.com) 上，右侧热门帖子的图像被黑色包围。有人可以帮我解决这个问题吗？ 在此处输入图像描述

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

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

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

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

标签： htmlblogger

解决方案

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

改变这个：

.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);
}

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

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

推荐阅读