如何使用CSS圆这个图像徽标,[关闭]

j2cgzkjk  于 2023-04-08  发布在  其他
关注(0)|答案(2)|浏览(99)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
2小时前关闭
这篇文章是编辑并提交审查2小时前.
Improve this question
我已经将此代码应用于我的图像,但它不会变成圆形,

.navbar {
  display: flex;
}

.nav-list {
  width: 50%;
  display: flex;
  align-items: center;
}

.logo img {
  height: 41px;
  margin: 3px 5px;
  border-radius: 35px;
  border: 2px solid white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stye.css">
</head>

<body>
  <nav class="navbar background">
    <ul class="nav-list">
      <div class="logo"><img src="https://via.placeholder.com/100" alt="logo"></div>
      <li>
        <a href="#home"></a>Home</li>
      <li>
        <a href="#about"></a>About</li>
      <li>
        <a href="#services"></a>Services</li>
      <li>
        <a href="#contact-Us"></a>Contact Us</li>
    </ul>
    <div class="right-nav">
      <input type="text" name="search" id="search">
      <button class="btn btn-sm">Search</button>
    </div>
  </nav>
</body>

</html>

我也试过这个代码:

width:23% (of the parent element)
border-radius:35px;

我试过1:1的比例,但它破坏了图片质量。

bprjcwpo

bprjcwpo1#

如果你有一个元素不是1:1的比例,你就不会得到一个‘完美’的圆。如果你想要的话,试着让高度和宽度相同。

nx7onnlm

nx7onnlm2#

基于你的第一组代码,你需要添加:
宽度:41 px;
这应该使您的边界为圆形

相关问题