时间戳

首页 > 解决方案 > 具有绝对位置的图像在 flex 布局中没有宽度

html - 具有绝对位置的图像在 flex 布局中没有宽度

问题描述

您好，我正在尝试构建一个水平旋转木马，并希望图像的图像纵横比为 3:4。

我想要实现的目标： 在此处输入图像描述 如果我设置aspect-ratio: 3/4;属性，这可以工作，我不能依赖这个属性，因为它还没有得到广泛的支持。

不保持纵横比的代码：

.shorts-carousel.s-WZNoplQ0Fjd9 {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    height: 300px;
    margin-bottom: 20px;
    padding-bottom: 3px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.item.s-WZNoplQ0Fjd9 {
    flex: 0 0 auto;
    margin: 0 5px;
}
.short-card.s-jeQbVeYbq5-Z.s-jeQbVeYbq5-Z {
    position: relative;
    height: 100%;
    width: 100%;
}
.short-card.s-jeQbVeYbq5-Z a.s-jeQbVeYbq5-Z {
    display: block;
    height: 100%;
    width: 100%;
}
.thumbnail.s-jeQbVeYbq5-Z.s-jeQbVeYbq5-Z {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.image.s-jeQbVeYbq5-Z.s-jeQbVeYbq5-Z {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
<div class="shorts-carousel s-WZNoplQ0Fjd9">
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://thumbs.dreamstime.com/b/double-aa-letters-logo-black-swoosh-double-aa-letters-logo-black-swoosh-vector-illustration-letter-180680952.jpg" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
</div>

试图保持纵横比的代码：

图片似乎没有宽度

.shorts-carousel.s-WZNoplQ0Fjd9 {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    height: 300px;
    margin-bottom: 20px;
    padding-bottom: 3px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.item.s-WZNoplQ0Fjd9 {
    flex: 0 0 auto;
    margin: 0 5px;
}
.short-card.s-jeQbVeYbq5-Z.s-jeQbVeYbq5-Z {
    position: relative;
    height: 100%;
    width: 100%;
}
.short-card.s-jeQbVeYbq5-Z a.s-jeQbVeYbq5-Z {
    display: block;
    height: 100%;
    width: 100%;
}
.thumbnail.s-jeQbVeYbq5-Z.s-jeQbVeYbq5-Z {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.thumbnail.s-jeQbVeYbq5-Z.s-jeQbVeYbq5-Z::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 133.3333333333%;
}
.image.s-jeQbVeYbq5-Z.s-jeQbVeYbq5-Z {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    object-fit: cover;
}
<div class="shorts-carousel s-WZNoplQ0Fjd9">
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://thumbs.dreamstime.com/b/double-aa-letters-logo-black-swoosh-double-aa-letters-logo-black-swoosh-vector-illustration-letter-180680952.jpg" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
   <div class="item s-WZNoplQ0Fjd9">
      <div class="short-card s-jeQbVeYbq5-Z">
         <a href="#" class="s-jeQbVeYbq5-Z">
            <div class="thumbnail s-jeQbVeYbq5-Z">
               <picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail"></picture>
            </div>
         </a>
      </div>
      <!--<Card>--> 
   </div>
</div>

谢谢你的任何帮助！

标签： htmlcss

解决方案

我制作了一个新版本，它可以做你想做的事，而不使用aspect-ratio，但它使用“固定”width和height. 我已经完成了“固定”高度和宽度，因为我看到你300px在height主要元素上都有。

这是代码：

* {  margin: 0; box-sizing: border-box; }

.shorts-carousel {
  height: 340px; /* for demo purpose only; it should be 300px */ 
  display: flex;
  background: red;
  gap: 0 10px;
  padding: 10px;
  width: 100%;
  overflow-x: visible;
  overflow-y: hidden;  
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.thumbnail {
  overflow: hidden;
  height: 300px;
}
.image {
  width: 226px;
  height: 300px;
  object-fit: cover;
}
<div class="shorts-carousel">
  <div class="item">
    <div class="short-card">
      <a href="#">
        <div class="thumbnail">
          <picture><img class="image" src="https://thumbs.dreamstime.com/b/double-aa-letters-logo-black-swoosh-double-aa-letters-logo-black-swoosh-vector-illustration-letter-180680952.jpg" alt="thumbnail" crossorigin="anonymous"></picture>
        </div>
      </a>
    </div>
    <!--<Card>--> 
  </div>
  <div class="item">
    <div class="short-card">
      <a href="#">
        <div class="thumbnail">
          <picture class="picture"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail" crossorigin="anonymous"></picture>
        </div>
      </a>
    </div>
    <!--<Card>--> 
  </div>
  <div class="item">
    <div class="short-card">
      <a href="#">
        <div class="thumbnail">
          <picture class="picture"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail" crossorigin="anonymous"></picture>
        </div>
      </a>
    </div>
    <!--<Card>--> 
  </div>
  <div class="item">
    <div class="short-card">
      <a href="#">
        <div class="thumbnail">
          <picture class="picture"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail" crossorigin="anonymous"></picture>
        </div>
      </a>
    </div>
    <!--<Card>--> 
  </div>
  <div class="item">
    <div class="short-card">
      <a href="#">
        <div class="thumbnail">
          <picture class="picture"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail" crossorigin="anonymous"></picture>
        </div>
      </a>
    </div>
    <!--<Card>--> 
  </div>
  <div class="item">
    <div class="short-card">
      <a href="#">
        <div class="thumbnail">
          <picture class="picture"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail" crossorigin="anonymous"></picture>
        </div>
      </a>
    </div>
    <!--<Card>--> 
  </div>
  <div class="item">
    <div class="short-card">
      <a href="#">
        <div class="thumbnail">
          <picture class="picture"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail" crossorigin="anonymous"></picture>
        </div>
      </a>
    </div>
    <!--<Card>--> 
  </div>
  <div class="item">
    <div class="short-card">
      <a href="#">
        <div class="thumbnail">
          <picture class="picture"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail" crossorigin="anonymous"></picture>
        </div>
      </a>
    </div>
    <!--<Card>--> 
  </div>
  <div class="item">
    <div class="short-card">
      <a href="#">
        <div class="thumbnail">
          <picture class="picture"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail" crossorigin="anonymous"></picture>
        </div>
      </a>
    </div>
    <!--<Card>--> 
  </div>
  <div class="item">
    <div class="short-card">
      <a href="#">
        <div class="thumbnail">
          <picture class="picture"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&amp;s=10" alt="thumbnail" crossorigin="anonymous"></picture>
        </div>
      </a>
    </div>
    <!--<Card>--> 
  </div>
</div>

注意：如果你想要一个“响应式”布局，你可以使用rem而不是实现相同的结果px，但它会“缩放”shorts-carousel元素，而不是像上面示例中那样使用固定的“流动” height。

推荐阅读