如何使用CSS中的百分比创建圆形图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (202)

当我试图用百分比制作圆形图像时,它就失败了。

Why I want that?因为它将允许我创建非常模块化的函数来处理元素的大小,并使它们同时响应。

Here my sandbox: https://stackblitz.com/edit/react-kkbyff

here my reactjs snippet:

const generateStyle=(sizeReference)=>{
  let unity="%" // FAIL TO MAKE CIRCULE WHEN I USE PERCENTAGES HERE
  // console.log(sizeReference+unity)
  return {
    height:sizeReference+unity,
    width:sizeReference+unity,
    borderRadius:(sizeReference/2)+unity
  }
}

function App() {
  return (
    <div className="photo_slider">
      <div className="pic1">
        <img 
          src="https://wallpapercave.com/wp/Nduz52P.jpg" 
          alt="awesome_image"
          style={generateStyle(30)}
        />
      </div>
      <div className="pic2">
        <img 
          src="https://wallpapercave.com/wp/5MsoNXS.jpg" 
          alt="awesome_image"
          style={generateStyle(15)}
          />
      </div>
      <div className="pic3">
        <img 
          src="https://wallpapercave.com/wp/Nduz52P.jpg" 
          alt="awesome_image"
          style={generateStyle(80)}
        />
      </div>
      <div className="pic4">
        <img 
          src="https://wallpapercave.com/wp/5MsoNXS.jpg" 
          alt="awesome_image"
          style={generateStyle(35)}
        />
      </div>
      <div className="pic5">
        <img 
          src="https://wallpapercave.com/wp/Nduz52P.jpg" 
          alt="awesome_image"
          style={generateStyle(60)}
        />
      </div>
    </div>
  );
}

CSS:

.photo_slider{ 
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  background: beige;
}

How make circular image using only percentages?

Any hint would be great, thanks

提问于
用户回答回答于

继续css前进 由于非正方形图像即使使用也不会形成圆形borderRadius: "50%" 。实现此目的的最佳方法是将图像放置在方形容器中并borderRadius: "50%"; overflow: "hidden"在容器上声明。

用户回答回答于

我假设你只是希望所有图像都显示为圆圈。

改变这个

borderRadius:(sizeReference/2)+unity

对此

borderRadius: "50%"

对于正圆,仅使用sizeReference作为宽度和高度。

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动