当我尝试仅使用百分比制作圆形图像时,它就失败了。
为什么我想要那个?因为它可以让我创建高度模块化的函数来处理我的元素的大小,并使它们同时响应。
这是我的沙箱:https://stackblitz.com/edit/react-kkbyff
这里是我的 reactjs 片段:
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;
}
如何仅使用百分比制作圆形图像?
任何提示都会很棒, 谢谢
最佳答案
我假设您只是希望所有图像都显示为圆圈。
改变这个
borderRadius:(sizeReference/2)+unity
对此
borderRadius: "50%"
对于真正的圆,仅使用 sizeReference 作为宽度和高度。
关于javascript - 如何在 CSS 中仅使用百分比创建圆形图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56516683/