如何使div元素中的CSS中的图像看起来不错？

Question

我试图在div中添加img元素，但是图像看起来压缩且丑陋，如何使它看起来不错？

我是CSS的初学者，因此请帮助我解决此问题，并向我展示一种新的处理方式，尤其是与图像有关的方法，以及如何使其在任何类型的div块中看起来都很好。谢谢：）

这里是代码

#new-release {
  color: #fff;
}

#new-release .container {
  max-width: 1100px;
  margin: auto;
}

#new-release .container .heading {
  margin: 0 0 20px 0;
}

#new-release .container .new-games-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 30px;
}

#new-release .container .new-games-list .single-game {
  height: 500px;
  overflow: hidden;
}

#new-release .container .new-games-list .single-game img {
  width: 100%;
  height: 50%;
}

#new-release .container .new-games-list .single-game .title {
  padding: 0px 0 5px 0;
}

#new-release .container .new-games-list .single-game .sub-title {
  color: hsla(0, 0%, 100%, 0.5);
  margin: 0 0 15px 0;
  font-weight: bold;
}

<section id="new-release">
  <div class="container">
    <h3 class="heading">New Releases</h3>

    <div class="new-games-list">
      <div class="single-game">
        <img src="https://cdn1.epicgames.com/undefined/offer/EGS_RockstarGames_RedDeadRedemption2_S2-1280x1440-43b9260015986b748e616f399c6de4dc.jpg?h=854&resize=1&w=640" alt="game-pic" />
        <h3 class="title">Fortnite</h3>
        <div class="sub-title">Epic Games</div>
        <div class="price">$10.99</div>
      </div>
      <div class="single-game">
        <img src="https://cdn1.epicgames.com/undefined/offer/SWJFO_ADHOC_510X680-510x680-04ec2ab0afa8b571f51c34577bf1ec09.jpg?h=854&resize=1&w=640" alt="game-pic" />
        <h3 class="title">RDR2</h3>
        <div class="sub-title">Rockstar Games</div>
        <div class="price">$10.99</div>
      </div>
      <div class="single-game">
        <img src="https://cdn1.epicgames.com/undefined/offer/Shenmue3_portraitpromo-1280x1420-1e524e5b26f65dfb4dcd44d3a7821419.jpg?h=854&resize=1&w=640" alt="game-pic" />
        <h3 class="title">Fortnite</h3>
        <div class="sub-title">Epic Games</div>
        <div class="price">$10.99</div>
      </div>
      <div class="single-game">
        <img src="https://cdn1.epicgames.com/epic/offer/EN_EGS_Launcher_Takeover_Borderlands_S2-1280x1440-4e2e8a65b68229dc833cf5c4773f23c4.jpg?h=854&resize=1&w=640" alt="game-pic" />
        <h3 class="title">Fortnite</h3>
        <div class="sub-title">Epic Games</div>
        <div class="price">$10.99</div>
      </div>
      <div class="single-game">
        <img src="https://cdn1.epicgames.com/epic/offer/ANC_Banner_TOW_NoLogo_1280x1440 (2)-1280x1140-5b445a5bbd0ba31cc63cbcb373ccfaa0.jpg?h=854&resize=1&w=640" alt="game-pic" />
        <h3 class="title">Fortnite</h3>
        <div class="sub-title">Epic Games</div>
        <div class="price">$10.99</div>
      </div>
    </div>
  </div>
</section>

Answer 1

我是HTML和CSS的中级专家，所以，如果我错了，那我就错了。

对于压缩图像，请尝试更改宽度和高度，或使用其他图像。

P.S。Divs应该是span。对于<div class=“sub-title”>，它应该是<span class=“sub-title”>。跨度用于文字，div用于框/设计。