考虑这种情况：
- 图像使用flex框在水平和垂直方面居中，
- 图像具有配置的CSS Border-radius（圆角），
- 图像在
＆lt; a＆gt; a＆gt; 标记
- 图像中配置了图像。使用CSS占用水平或垂直空间的50％，并在需要时按比例缩小
<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>
示例：
正常操作（可用空间）：
如果可用的高度和宽度都以大约相等的比例降低，则圆角为保留为图像收缩：
但是，如果水平空间受到约束，但垂直空间却没有，反之亦然，则丢失了圆角：
垂直空间约束：
水平空间约束：
Border-Radius是否以像素表达或百分比行为的百分比，都会发生问题。
无论是在Firefox和Chrome中都验证了
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: https://jsfiddle.net/c8h0L7o1/
Normal operation (ample space available):
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
发布评论
评论（3）
只需在锚标签中添加边框半径
just add border radius in anchor tag too
删除
宽度：200px;身高：200px;来自IMG标签Delete
width:200px; height: 200px;from img tag为IMG添加类：
Then try to edit by CSS code
add class for img:
Then try to edit by CSS code