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

您只需在圆形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 2

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

有各种各样的技术可以做到这一点但是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 Demo (scaled)

Answer 3

如果将边框半径设置为img，则可以获得该圆形图像。

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%;
}

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

4 个答案: