Consider this scenario:
- An image is centered both horizontally and vertically using a flex box
- The image has a CSS border-radius configured (rounded corners)
- The image is inside an
<a>tag - The image is configured using CSS to take up no more than 50% of the horizontal or vertical space, and to shrink down proportionally if needed
<body style="margin:0;overflow:hidden;width:100%;height:100%;position:fixed;text-align:center;background-color:green">
<div style="flex-direction:column;justify-content:center;align-items:center;display:flex;height:100vh;width:100%">
<a href="https://google.com/" style="max-width:50%;max-height:50%">
<img src="https://i.imgur.com/CHHOCY5.png" style="border-radius:20%;object-fit:scale-down;max-height:100%;max-width:100%;width:200px;height:200px">
</a>
</div>
</body>
Example: 
If available height and width are both reduced in roughly equal proportion, the rounded corners are retained as the image shrinks:
However if horizontal space is constrained but vertical space is not, or vice versa, the rounded corners are lost:
Vertical space constraint:
Horizontal space constraint:
How can the rounded corners be retained in these scenarios?
The problem happens regardless if the border-radius is expressed in pixels or percent
Behavior has been verified in both Firefox and Chrome
CodePudding user response：
Delete width:200px; height: 200px; from img tag
CodePudding user response：
just add border radius in anchor tag too
<a style="border-radius:20%" > img </a>
CodePudding user response：
add class for img:
Then try to edite by css code