如何使用css制作适合div形状的照片

Question

我正在开发一个web应用程序，我的部分工作是使用HTML和CSS实现接口。

我想添加一个包含用户个人资料照片的div，但我的div是一个圆形，我所有的照片都有不同的矩形。我想知道如何使用CSS和JavaScript制作一张适合我的div圆形大小的照片。

此时此刻，我正在使用以下代码：

HTML

<!-- language: lang-html -->
 #photo
 img(src="img/profil-cercle.png")
<!-- end snippet -->

CSS

#photo
  img
    width 100%
    height 100% 

它只适用于已经具有圆形格式的照片。

Answer 1

如果图像需要内联（即不是背景图像），那么我认为您希望它居中。

有各种各样的技术可以做到这一点，但flexbox效果很好。

首先，div需要是正方形（您没有提到大小，所以我选择了一个任意数字）。

然后，我们用border-radius:50%将其四舍五入，并通过添加overflow:hidden来停止显示任何多余的图像。

然后居中：

#profile {
  overflow: hidden;
  /* required */
  border-radius: 50%;
  /* required */
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="profile">
  <img src="http://www.fillmurray.com/460/300" alt="">
</div>

请注意，图像比正方形大，但是矩形。。。。图像本身不需要是正方形的。

居中是否能给你想要的真实外观是另一个问题。

可以使用将图像"缩放"到div的最大高度

img {
  max-height: 100%;
  width: auto;
}

JSfiddle演示（缩放）

Answer 2

您只需在圆形div 中设置背景图像

#profile {
  border-radius: 50%;
  border: 5px solid black;
  width: 200px;
  height: 200px;
  background-image: url("http://lorempixel.com/200/200/");
}

<div id="profile">
</div>

Answer 3

如果将img的边界半径设置为50%，则可以获得圆形图像。

HTML

<div id="photo">
  <img src="https://placehold.it/200x200" alt="" />
</div>

CSS

#photo img {
    border-radius: 50%;
}

Answer 4

CSS:

img {
  border-radius: 50%;
}