javascript 如何定位徽章图标独立于头像的大小？

d7v8vwbk 于 2023-11-15 发布在 Java

关注(0)|答案(1)|浏览(109)

我需要建立一个头像组件，将有badgets。问题是，定位是不正确的，根据头像的大小。
在下面的图片中，很容易理解问题所在。你能告诉我如何调整定位，以便无论头像的大小都是正确的吗？
下面是我放入codesandbox的代码
先谢谢你了。

的数据

import React from "react";
import BadgeSvg from "./BadgeSvg";
import "./avatar.scss";
const Avatar = ({ size }) => {
  const image = "https://i.imgur.com/pKHO357.png";
  return (
    <div>
      <div className={`content-icon ${size}`}>
        <img
          src={image}
          alt="Avatar Image"
          className={`content-icon ${size}`}
        />
      </div>
      <div className="badge">
        <BadgeSvg size={size} />
      </div>
    </div>
  );
};
export default Avatar;

个字符

JavaScript

来源：https://stackoverflow.com/questions/77473319/how-to-position-badge-icon-independent-the-size-of-the-avatar

1条答案

按热度按时间

k4emjkb11#

重新构造jsx可以解决css的绝对和相对位置问题。但是为了完美的定位，你需要像下面这样手动计算一些css。
这是您的Avatar组件

import React from "react";
import BadgeSvg from "./BadgeSvg";
import "./avatar.scss";
const Avatar = ({ size }) => {
  const image = "https://i.imgur.com/pKHO357.png";
  const getRightValue = (aSize) => {
    if (aSize === "medium") {
      return { right: "-3px" };
    }
    if (aSize === "xlarge") {
      return { right: "5px" };
    }
    if (aSize === "large") {
      return { right: 0 };
    }
  };
  return (
    <div>
      <div className={`content-icon ${size}`}>
        <img
          src={image}
          alt="Avatar Image"
          className={`content-icon ${size}`}
        />
        <div className="badge" style={getRightValue(size)}>
          <BadgeSvg size={size} />
        </div>
      </div>
    </div>
  );
};
export default Avatar;

字符串
这是最终的css

.content-icon {
  position: relative;
  /* rest of css */
}
.badge {
  position: absolute;
  bottom: 0;
}

型
这是最后的输出，希望对你有帮助。

的数据

展开查看全部

赞(0）回复(0）举报 2023-11-15

我来回答

javascript 如何定位徽章图标独立于头像的大小？

1条答案

相关问题

热门标签

最新问答