Html 如何从矩形流体图像自动生成圆形缩略图';什么是网站中心?

Html 如何从矩形流体图像自动生成圆形缩略图';什么是网站中心?,html,css,image,Html,Css,Image,我一直在寻找这个问题的答案,但似乎找不到任何可靠的答案。问题是:我在网页中有一个图像,直到运行时我才知道它的大小。我希望能够创建从图像中心拍摄的图像的圆形裁剪,即使在运行时之前我不知道它的大小。我还希望能够调整这个图像的大小,同时保持其圆形。这是否可能使用CSS?更重要的是,这是一种坏习惯吗?我是否应该使用某种图像处理软件生成所需的图像并将其硬编码到网站中?如果是这样的话,我可以用什么简单的方法来生成它们,而不是用photoshop自己手工制作 TLDR:我希望能够在这个网站上做什么,但不需要将

我一直在寻找这个问题的答案,但似乎找不到任何可靠的答案。问题是:我在网页中有一个图像,直到运行时我才知道它的大小。我希望能够创建从图像中心拍摄的图像的圆形裁剪,即使在运行时之前我不知道它的大小。我还希望能够调整这个图像的大小,同时保持其圆形。这是否可能使用CSS?更重要的是,这是一种坏习惯吗?我是否应该使用某种图像处理软件生成所需的图像并将其硬编码到网站中?如果是这样的话,我可以用什么简单的方法来生成它们,而不是用photoshop自己手工制作

TLDR:我希望能够在这个网站上做什么,但不需要将像素值硬编码到图像大小

任何帮助都将不胜感激


马特

给div一个正方形的高度/宽度,并将图像作为
背景图像
应用,并使用
背景尺寸:封面
使图像响应div和
背景位置:居中
将图像垂直和水平居中,以便“裁剪”从中心开始

方形作物

div{
位置:相对位置;
显示:内联flex;
对齐项目:居中;
证明内容:中心;
宽度:50vh;
高度:50vh;
边界半径:50%;
溢出:隐藏;
背景:中心不重复;
背景尺寸:封面;
背景图像:url('https://pbs.twimg.com/profile_images/1980294624/DJT_Headshot_V2_400x400.jpg');
}

非常感谢您!我解决这个问题的尝试非常相似,我想我唯一缺少的是使用vh而不是%。我真傻。