为啥边界半径对图像不起作用？

Posted 2023-02-22

【中文标题】为啥边界半径对图像不起作用？

【英文标题】：Why doesn't border-radius work on the image?为什么边界半径对图像不起作用？

【发布时间】：2021-10-05 16:34:21

【问题描述】：

The image

我已经尝试了所有方法，但边框半径不适用于此图像。它只是对它没有反应。我已经尝试过 % 和 px。图像对您可以看到的任何其他 CSS 值或我在组件的 img 标记中传递的属性作出反应。一切，除了边界半径。我没有想法。

这是组件：

import React from "react";
import 
  UserContainer,
  User,
  UserProfilePicture,
  UserProfileName,
  UserChevronIcon,
 from "./User.style";
import Logo from "../../../images/ProfileFace.jpg";
import  FontAwesomeIcon  from "@fortawesome/react-fontawesome";
import  faChevronDown  from "@fortawesome/free-solid-svg-icons";

function UserProfile() 
  return (
    <UserContainer>
      <User>
        <UserProfilePicture>
          <img src=Logo   border-radius="50px" />      -----> both px and % don't work
        </UserProfilePicture>
        <UserProfileName>Olivia Wilde</UserProfileName>
        <UserChevronIcon>
          <FontAwesomeIcon icon=faChevronDown color="#7a7e7e" />
        </UserChevronIcon>
      </User>
    </UserContainer>
  );


export default UserProfile;

这是样式化组件：

import styled from "styled-components";

export const UserContainer = styled.div`
  height: 90%;
  width: 30%;
  margin: 0px;
  padding: 0px;
  background-color: inherit;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
`;

export const User = styled.div`
  height: 70%;
  width: 100%;
  background-color: inherit;
  display: flex;
  text-align: end;
  justify-content: space-around;
`;

export const UserProfilePicture = styled.image`
  height: 50%;
  width: 50%;
  border-radius: 100px;      -----> both px and % don't work
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const UserProfileName = styled.div`
  height: 40%;
  width: 40%;
  color: #7a7e7e;
  font-size: 17px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: flex-start;
`;

export const UserChevronIcon = styled.div`
  height: 50%;
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
`;

【问题讨论】：

试试style=borderRadius:'10px'而不是border-radius=...

嗨，我不确定这是否能解决问题，但请尝试编写borderRadius而不是border-radius。至少内联。我认为属性是 React.js 中的 CamelCase 并且 React 可能不支持此 DOM 属性 - reactjs.org/docs/dom-elements.html 将其放入样式属性中，如 @Winter 在答案中提到的。

将 img 标签放在一个 div 上，并为该 div 赋予你想要的边界半径并溢出：隐藏

嘿，我尝试将 style=borderRadius:"50%" 作为 img 标签中的道具，并且成功了。非常感谢！

【参考方案1】：

我假设你想把这张图片做成圆形。将 100px 边框半径添加到 50px 图像将不起作用。改用百分比。 例如，要使方形图像看起来是圆形的，请使用以下样式：

border-radius: 50%;

如果它不起作用，可能是另一种样式正在覆盖它，因此请尝试使用重要标签：

border-radius: 50% !important;

如果这也失败了（可能被另一个 !important 标记覆盖在你的 css 中的某个位置）尝试内联样式：

<img src=Logo   style="border-radius: 50%" />

【讨论】：

style=borderRadius:"50%" 在 img 标签有效。感谢您的贡献。

【参考方案2】：

您可以通过以下方式对其进行样式设置：

   <img src=Logo   style=borderRadius: '50%'/>

【讨论】：

style=borderRadius:"50%" 在 img 标签有效。感谢您的贡献。