请教一个前端css问题。

xiatianlong
  • 2.2k

有一个圆形的div,假设直径为200px .现在我要放一张图片在这个圆里面,正常情况下我设置图片的宽高为100%。
如图:
黑色边框是div圆,边框为图片。
clipboard.png

这样的话图片的四个角就会背裁掉。

有办法用最简单的办法做到这样的效果么?

clipboard.png

图片在圆里完全显示。

回复
阅读 2.3k
5 个回答
陈安柱
  • 4k
✓ 已被采纳

将图片作为div的背景图片,以这样的格式设置即可background: url('img.png') center/70.7106% no-repeat;

clipboard.png

哦,根据勾股定理,内部方框div的宽度为圆div宽度的 1/1.414

toBeTheLight
  • 16.6k

background的话可以试试

background-size:调整大小;
background-position:center center居中;

如果是<img/>的话
除了使用

img{
    transform-origin: center center;
    transform:scale(.1);
}

还是得自己算。

下面称正方形为子元素, 圆形为父元素.

如果是固定像素的子元素直接写死宽高像素, 再定位即可.
安利一个昨天写的web中的垂直居中, 多种方法实现垂直居中.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 200px;
      border: 1px solid black;
      border-radius: 100px;
    }

    img {
      width: 142px;
      height: 142px;
    }
  </style>
</head>
<body>
<div>
  <img src="https://sf-sponsor.b0.upaiyun.com/551dc6c4459ccb476719307a36070815.png">
</div>
</body>
</html>

图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏