当我尝试只使用百分比来制作圆形图像时,它就失败了。
,因为它允许我创建大量的模块化函数来处理我的元素的大小,并使它们在同一时间内响应。
这里是我的沙箱:https://stackblitz.com/edit/react-kkbyff
这里是我的代码片段:
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;
}
如何仅使用百分比制作圆形图像?
任何提示都可以,谢谢
发布于 2019-06-10 01:13:54
我假设你只是希望所有的图像都显示为圆形。
改变这一点
borderRadius:(sizeReference/2)+unity
到这个
borderRadius: "50%"
对于真正的圆,宽度和高度仅使用sizeReference。
https://stackoverflow.com/questions/56516683
复制相似问题