Issue
I created a round div(border-radius: 50%) and want to flex my picture in triangular order
and what i need.
and thats my code.
<body bgcolor="gray">
<div align="center" style="width: 600px; height: 600px; background: white; border-radius: 50%; margin: auto; align-items: center; display: flex">
<img src="../pics/tryceratops.jpg" width="200" height="200" style="border-radius: 50%;">
<img src="../pics/stegozavr.jpg" width="200" height="200" style="border-radius: 50%;">
<img src="../pics/tyranozavr.jpg" width="200" height="200" style="border-radius: 50%;">
</div>
yea i use style at tags cause it's homework
I don't want to bother with css files or style tags but do as you like, I understand
Solution
Just remove the display: flex
because we don't need it here and add a <br/>
tag after the first img, then adjust the div
and img
sizes so they properly fits.
I discovered a simple formula of img_size * 2.3
to find the required height and width of div
tag according to size of img
tag
<style>
div {
--s: 130px; /* Image size */
--size: calc( var(--s) * 2.3 ); /* to calculate perfect div size acc. to image size */
width: var(--size);
height: var(--size);
background: white;
border-radius: 50%;
margin: auto;
background: #aaa;
text-align: center;
padding: 10px;
transition: 2s;
}
img {
width: var(--s);
height: var(--s);
border-radius: 50%;
}
div:hover {
transform: rotate(360deg);
}
</style>
<body>
<div>
<img src="pics/a.png" /><br />
<img src="pics/b.png" />
<img src="pics/c.png" />
</div>
</body>
</html>
Here is the preview...
Answered By - Abhay Bisht
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.