Material Design 是 Google 推出的一种平面化的设计语言。使用 Material Design，可以让网站或应用程序拥有干净、明亮、现代化的外观，并体现出发展的趋势。在 Material Design 中，圆形是一种常见的设计元素，通过圆形图片可以实现漂亮的界面效果。但是，在实现圆形图片时，容易出现拉伸变形，影响视觉效果。本文将介绍如何避免这种拉伸变形，并提供示例代码。
引入图片
首先，需要引入一张待处理的图片。这里以一张熊猫图片为例：
<img src="panda.jpg" alt="panda">
使用 CSS 达到圆形效果
要实现圆形图片，可以使用 CSS 的 border-radius 属性。这个属性可以设置元素的角度，使其呈现出圆形的效果。例如：
img {
border-radius: 50%;
}但是，如果这样做，图片画面的宽高比例不是 1:1（即不是正方形），就会发生组件变形，熊猫脸就会变形变成笨拙。
解决变形问题
为了解决图片变形的问题，可以使用下面的方法将原始图片等比例缩放为正方形：
img {
width: 100%;
height: auto;
/* 如果硬要让图片铺满容器，那么只能可以用 object-fit 属性： */
object-fit: cover;
}通过上述方法，可以将原始图片等比例缩放为正方形，从而避免变形。可以看到优化后的示例效果：
<div class="circle-wrapper"> <img src="panda.jpg" alt="panda"> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------- ------- ------------ ------- -- ------------ -- ------ ------ ------- ------ -- ------------ --- ----------------- -------- - --- - ------ ----- ------- ----- -------------- ---- ----------- ------ -
总结
通过上面的方法，我们可以实现圆形图片，同时避免了拉伸变形的问题。当然，这种方法也可以用于其他需要等比例缩放的图片。希望这篇文章对你在实现 Material Design 响应式网页方面有所帮助。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c74e2e10032fedd39109a1