CSS 图片库无法很好地居中

问题描述 投票：0回答：1

我使用 HTML 和 CSS 制作了一个网站，可以在这里看到。 它可以工作，但正如您所看到的，图片库存在一些间距问题。 the first space is bigger than the other ones

如您所见，第一张图片到另一张图片的空间不一致。

这是我的 CSS 片段：

.gallery {
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    display: inline-block;
    border: 3px solid #8f8f8f;
    margin: 5px;
    border-radius: 15px;
    background-color: #29313d;
}
.gallery description {
    padding: 10px;
    text-align: center;
}
.gallery:hover {
    border: 3px solid #ccc;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.gallery img {
    width: 200px;
    height: 100px;
    border-radius: 12.5px;
    object-fit: cover;
}

这就是导致不一致的代码。我该如何解决它？

css
1个回答
0
投票

您所指的空间称为_margin。 

.gallery
中的图像宽度仅设置为
200
。这里没有单位，所以它是一个错误，并且在 CSS 中默认被忽略。

因此，无论图库中的图像有多大，卡片都会调整为该图像的默认大小。在本例中，所有 

idk.png
图像均为 1280 x 720 像素（这是 16:9 比例）。左边的一张图像尺寸不同。它是 768 x 432 像素（这也是 16:9 比例）。

唯一的区别是，在 CSS 中，图像的边距由其大小决定。如果图像缩小，它们的边距也会缩小。这就是所有 

idk.png
图像之间的边距较小的原因。要解决此问题，只需设置所有图像的特定宽度（不仅仅是“idk.png”图像）。

<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      color: #b5b5b5;
      text-decoration: none;
      font-weight: 750;
    }
  </style>
  <title>M100</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
  <style>
    @font-face {
      font-family: myFont;
      src: url(Nunito-SemiBold.ttf);
    }
    
    * {
      margin: 0;
      padding: 0;
    }
    
    .containter {
      height: 100vh;
      width: 100%;
      background-position: center;
      background-size: cover;
      box-sizing: border-box;
      position: relative;
    }
    
    .navbar {
      width: 95%;
      height: 15vh;
      margin: auto;
      display: flex;
      align-items: center;
    }
    
    nav {
      width: 90%;
      text-align: center;
      background-color: #323a48;
      flex: 1;
      padding-left: 60px;
      padding: 15px;
      border-radius: 100vh;
    }
    
    nav ul li {
      display: inline-block;
      list-style: none;
      margin: 0px 20px;
    }
    
    nav ul li a {
      font-family: "Nunito", sans-serif;
      font-weight: 650;
      font-size: 20px;
      text-decoration: none;
      color: #b5b5b5;
    }
    
    h1 {
      text-decoration: none;
      font-size: 60px;
      font-weight: 500;
      margin-top: 24px;
      margin-bottom: 15px;
      color: #b5b5b5;
    }
    
    h2 {
      text-decoration: none;
      font-size: 30px;
      font-weight: 500;
      margin-top: 24px;
      margin-bottom: 15px;
      color: #b5b5b5;
    }
    
    p {
      font-size: 20px;
      color: #b5b5b5;
    }
    
    .content {
      font-family: "Nunito", sans-serif;
      margin-left: 10%;
      margin-top: 10%;
    }
    
    .contentCenter {
      font-family: "Nunito", sans-serif;
      margin-left: 0%;
      margin-top: 5%;
      text-align: center;
    }
    
    .content .btn {
      display: inline-block;
      background: color
    }
    
    .btn {
      display: inline-block;
      color: #ffff;
      font-family: "Nunito", sans-serif;
      font-size: 23.5px;
      background: #1E90FF;
      width: 160px;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      border-radius: 15px;
      box-shadow: 0 0 50px rgba(0, 0, 0, 0.0);
      -webkit-transition-duration: 0.25s;
      transition-duration: 0.25s;
    }
    
    .btn:hover,
    .btn:focus,
    .btn:active {
      box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
    
    body {
      background-color: #1b2029;
    }
    
    .gallery {
      -webkit-transition-duration: 0.25s;
      transition-duration: 0.25s;
      display: inline-block;
      border: 3px solid #8f8f8f;
      margin: 5px;
      border-radius: 15px;
      background-color: #29313d;
    }
    
    .gallery description {
      padding: 10px;
      text-align: center;
    }
    
    .gallery:hover {
      border: 3px solid #ccc;
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
    
    .gallery img {
      width: 200px;
      height: 100px;
      border-radius: 12.5px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="containter">
    <div class="navbar">
      <nav>
        <ul>
          <li><a href=".">🏠 Home</a></li>
          <li><a href="./projects">📦 Projects</a></li>
          <li><a href="./resume">📄 Resume</a></li>
          <li><a href="./discord">💬 Discord Server</a></li>
          <li><a href="https://www.roblox.com/groups/16658958">🕹️ M100 Studios</a></li>
        </ul>
      </nav>
    </div>
    <div class="contentCenter">
      <center>
        <h1>Resume</h1>
        <p>So yeah I worked on some things, in case you want to hire me.
          <img src="assets/images/cool-guy.png" width="25" height="25">
        </p>
        <br>
        <p>Any other projects can be found on my <a href="https://scratch.mit.edu/users/Micamaster100">Scratch</a> and <a href="github.com/Micamaster100">Github</a></p>
        <br>
        <h2>Games</h2>
      </center>

      <div class="gallery">
        <a target="_blank" href="https://www.roblox.com/games/16955585161">
          <img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/obbydoxxedthing.png">
          <div class="description">
            Obby but if you die...
          </div>
        </a>
      </div>
      <div class="gallery">
        <a target="_blank" href="about:blank">
          <img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/idk.png">
          <div class="description">
            In Development...
          </div>
        </a>
      </div>
      <div class="gallery">
        <a target="_blank" href="about:blank">
          <img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/idk.png">
          <div class="description">
            In Development...
          </div>
        </a>
      </div>


      <h2>Contributions to Other Games</h2>
      </center>

      <div class="gallery">
        <a target="_blank" href="">
          <img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/gemachagraphic.png">
          <div class="description">
            In Development
          </div>
        </a>
      </div>
      <div class="gallery">
        <a target="_blank" href="https://create.roblox.com/talent/creators/3158841538">
          <img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/idk.png">
          <div class="description">
            Your Game Here
          </div>
        </a>
      </div>
    </div>
  </div>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.