Question

我试图让我的flex容器中的所有图像使用4：3的比例具有相同的高度，所有这些都是响应式的。当弹出容器外，一切都运行良好，但当放入它时，似乎是标题的长度决定了宽度。我无法弄清楚为什么。

/* Just copying the guy in vid for now, trying to figure it all out hopefully it won't be too much of a bother responsive eh ffs , somethings I haven't copied, tryna do best */

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  background-color: gray;
  width: 80%;
  margin: auto;
}

#cccccc {
  background-color: orange;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.w {
  background-color: red;
  /* doesnt show hay */
  display: block;
}

.views {
  float: left
}

.rating {
  float: right
}

.parentt {
  max-width: 258px;
}

.containertt {
  width: 100%;
  position: relative;
  padding-bottom: 75%;
  /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.containertt img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.figcaptionnnn {
  /* background-color:red; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%
}

.figcaptionnnn a {
  color: white;
  text-decoration: none;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="tete.css">
</head>

<body>

  <div id="cccccc">
    <div class="parentt">
      <div class="containertt">
        <img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
      </div>
      <div class="figcaptionnnn">
        <span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman</a></span></br>
        <div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
      </div>
    </div>

    <div class="parentt">
      <div class="containertt">
        <img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
      </div>
      <div class="figcaptionnnn">
        <span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman vdfvdsv dvdfv ddffv dvddv dvdcffc dvdfcd</a></span><br/>
        <div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
      </div>
    </div>
  </div>


  <div class="parentt">
    <div class="containertt">
      <img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
    </div>
    <div class="figcaptionnnn">
      <span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batan" >Tall french maid and batman</a></span></br>
      <div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
    </div>
  </div>

  <div class="parentt">
    <div class="containertt">
      <img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
    </div>
    <div class="figcaptionnnn">
      <span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman vdfvdsv dvdfv ddffv dvddv dvdcffc dvdfcd</a></span></br>
      <div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
    </div>
  </div>

</body>

</html>

希望所有图像在容器中具有相同的高度

0 个答案: