矩形图像的 CSS 圆形裁剪

.image-cropper {
    max-width: 100px;
    height: auto;
    position: relative;
    overflow: hidden;
}

.image-cropper img{
    display: block;
    margin: 0 auto;
    height: auto;
    width: 150%; 
    margin: 0 0 0 -20%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;  
}

<div class="image-cropper">
   <img src="https://sf1.autojournal.fr/wp-content/uploads/autojournal/2012/07/4503003e3c38bc818d635f5a52330d.jpg" class="rounded" />
</div>

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

<div class="image-cropper">
  <img src="https://via.placeholder.com/150" class="rounded" />
</div>

Css相关问答推荐

创建始终为剪辑元素的300%高度并左对齐的圆形剪辑路径

响应的Megamenu位置css

将鼠标悬停在具有效果的元素上

使用普通 CSS 的视口对角线长度

在R shiny中 Select DT表格值的背景 colored颜色 (无条件的自由 Select )

如何按列垂直对齐项目，但不在列内水平对齐

使用 ：checked 显示隐藏的侧面板

不同的背景 colored颜色 取决于 URL

整个列的 CSS Grid Margin Top

使用 Webpack5 在 CSS 文件中内联字体和图像？

如何仅包装左侧内容

CSS Stepper - LI After Overlaying LI Before

具有自动调整大小的自动填充行的 CSS 网格

如何将 textarea 宽度扩展到父级宽度的 100%(或如何将任何 HTML 元素扩展到父级宽度的 100%)？

如何始终在浏览器中显示垂直滚动条？

如何填充 100% 的剩余高度？

使用 CSS 垂直居中旋转文本

跨域 iframe 调整大小

CSS3可以转换字体大小吗？

使图像具有响应性 - 最简单的方法