CSS宽度/高度问题

Question

我面临图像高度问题。我想不使用硬编码就将that image的高度设为100％。但是我做不到。每次图像边缘留有余量。我更改了图像的宽度，高度，字体大小，但没有任何效果。

这是我的html代码：

<div class="flexbox card">
  <div class="post-card-img">
    <img src="http://via.placeholder.com/300x300/DDaDaa/FFFFFF" alt="" class="img-responsive" />
  </div>
  <div class="post-card-body">
    <div class="post-card-heading">
      <h3>Lorem ipsum dolor sit amet.</h3>
      <h6>By <a href="#">Admin Ahsan</a> September 11, 2015</h6>
      <hr />
    </div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
      atque sed in, fugiat natus laboriosam
    </p>
    <div class="btn-section">
      <button class="btn continue-btn">Continue Reading</button>
    </div>
  </div>
</div>

这是我的CSS代码：

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}
html {
  font-size:16px;
}
body {
    font-family: Raleway, "Times New Roman", Times, serif;
    background-color: #f6f6f6;
    line-height: 1.5rem;
    width: 100%;
    color: #424242;
}

.flexbox {
    display: flex;
    justify-content: space-between;
}

.img-responsive {max-width:100%;max-height:100%;}
.card {
    background-color: #ffffff;
    border: 2px solid red;
    margin: 1.5rem 0rem 0rem;
    width: 75%;
}

.post-card-body {
    padding: 1.5rem;
}

.post-card-heading {
    margin: 0 0 0.75rem;
}

.btn-section {
    margin-top: 1rem;
}
.continue-btn {
    background-color: #ffb69b;
    border-color: #ffb69b;
}

.btn {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    border: 0.0625rem solid #e9e9ea;
}

codepen链接：click here截图：click here

Answer 1

添加显示：阻止您的图像。它被视为没有高度的嵌入式元素。

Answer 2

两个可能的解决方案：

.post-card-img img {
  display: block;
}

或

.post-card-img {
  line-height: 0;
}