html - 请教一个前端css问题。-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html - 请教一个前端css问题。

天蓬老师 2017-04-17 14:50:07

[HTML讨论组]

957

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

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

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

图片在圆里完全显示。

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(5)

PHP中文网2017-04-17 14:52:07 5楼

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

赞 +0

添加回复

高洛峰2017-04-17 14:52:07 4楼

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

赞 +0

添加回复

PHPz2017-04-17 14:52:07 3楼

background的话可以试试

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

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

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

还是得自己算。

赞 +0

添加回复

ringa_lee2017-04-17 14:52:07 2楼

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

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

赞 +0

添加回复

ringa_lee2017-04-17 14:52:07 1楼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    p {
      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>
<p>
  <img src="https://sf-sponsor.b0.upaiyun.com/551dc6c4459ccb476719307a36070815.png">
</p>
</body>
</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>