CSS图像无法填充整个容器

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

我有一个问题，我的图像无法填满图像容器的整个高度HTML：

<body>
    <div class="card">
        <div class="front-side">
            <img src="img.jpg" alt="Font-Image">
        </div>
    </div>
</body>

CSS：

*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

body{
    padding: 30px;
  }

.front-side img{
    width: 100%;
  }


.card{
    background-color: red;
    width: 20%;
  }

结果如您所见，“卡片”背景的高度大于图像的高度：

enter image description here

html css web sass css-selectors
1个回答
0
投票

将图像设置为显示块

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 30px;
}

.front-side img {
  display: block;
  width: 100%;
}

.card {
  background-color: red;
  width: 20%;
}
<body>
  <div class="card">
    <div class="front-side">
      <img src="https://source.unsplash.com/random/400x600" alt="Font-Image">
    </div>
  </div>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.