Question

这行代码加载了一个链接，上面有一个图像。

<li class="post-nav-wrap">
    <?php
        $prevPost = get_previous_post(true);
        if($prevPost) {
            $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );
        }
        previous_post_link('%link',"$prevthumbnail  %title", TRUE);
    ?>
</li>

我用css调用了css中的图像：

.post-nav-wrap img {
    width: auto;
    height:110px;
}

我想要的是要完全舍入的图像。我知道如何使用立方体大小的图像来做到这一点。（像高度和宽度一样）但这个图像是一个矩形（265px×110px）。有可能使它在CSS内完全舍入吗？

Answer 1

＆＃13;

img {
  border-radius: 100%;
}

＆＃13;

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=265%C3%97110&w=265&h=110" />

＆＃13;

并且你的意思是从图像中创建一个圆圈：

为图像添加包装并将边框半径添加到该图像。隐藏溢出并将图像定位到中心。

＆＃13;

.circle-wrapper {
  position: relative;
  overflow: hidden;
  width: 110px;
  height: 110px;
  border-radius: 100%;
}
img {
  width: auto;
  height:110px;
  position: absolute;
  transform: translateX(-50%);
  left: 55px;
}

＆＃13;

<div class="circle-wrapper">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=265%C3%97110&w=265&h=110" />
</div>

＆＃13;

Answer 2

你可以尝试这个：

div { 
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 500px;
    height: 500px;
}

DEMO FIDDLE

More examples

Answer 3

这可以很简单地实现->>
只需将一个类添加到您的图片->>

.rounded {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

圆形图像css

3 个答案: