Question

我一直在寻找这个问题的答案，似乎找不到任何可靠的东西。问题是：我在网页中有一个图像，其大小直到运行时才知道。我希望能够创建从图像中心拍摄的这个图像的圆形裁剪，即使我不知道它的大小直到运行时间。我还希望能够在保持其圆形形状的同时调整此图像的大小。这可能使用CSS吗？更重要的是这是不好的做法？我应该只使用某种图像处理软件生成所需的图像并将其硬编码到网站中吗？如果这样容易，我可以使用它来生成这些而不是使用photoshop自己手动制作它们？

TLDR：我希望能够在这个网站上做什么，但没有将像素值硬编码到图像大小。

http://sixrevisions.com/css/circular-images-css/

非常感谢任何帮助。

马特

Answer 1

将div设置为方形高度/宽度并将图像应用为background-image并使用background-size: cover;让图像响应div和background-position: center center;以使图像垂直居中，水平使“作物”来自中心。

方形作物

div {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50vh;
  height: 50vh;
  border-radius: 50%;
  overflow: hidden;
  background: center center no-repeat;
  background-size: cover;
  background-image: url('https://pbs.twimg.com/profile_images/1980294624/DJT_Headshot_V2_400x400.jpg');
}

<div></div>

肖像

div {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50vh;
  height: 50vh;
  border-radius: 50%;
  overflow: hidden;
  background: center center no-repeat;
  background-size: cover;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/bb/Hillary_Rodham_Clinton-cropped.jpg');
}

<div></div>

景观

div {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50vh;
  height: 50vh;
  border-radius: 50%;
  overflow: hidden;
  background: center center no-repeat;
  background-size: cover;
  background-image: url('http://www.dailystormer.com/wp-content/uploads/2016/11/obama.jpg');
}

<div></div>

如何从网站的矩形流体图像中心自动生成圆形缩略图？

1 个答案: