解决a.shop-now按钮占满图片高度的问题

现有代码如下：

HTML代码 #

<div class="carousel-cell">
    <picture> ... </picture>
    <a class="shop-now" href="#"></a>   
</div>

.carousel-cell CSS #

position: relative;
width: 100%;

a.shop-now CSS #

bottom: 0;
display: block;
font-size: 13px;
font-weight: 400;
line-height: 130%;
padding: 13px 15px;
position: absolute;
right: 0;
width: auto;

解决思路： #

• 修复.carousel-cell的高度坍塌问题
  由于.carousel-cell仅设置宽度，内部绝对定位的按钮脱离文档流，导致容器高度无法被图片撑开，按钮的绝对定位参考高度异常。给.carousel-cell添加以下样式：

  height: fit-content;
  /* 或者使用 display: inline-block; 也能让容器高度由内部元素撑开 */
  

• 明确按钮的视觉边界
  当前按钮是空标签，无内容和背景，容易因样式继承导致视觉上占满高度。给按钮添加文本和背景样式，明确按钮范围：

  background-color: #2c3e50; /* 自定义背景色 */
  color: #ffffff;
  text-decoration: none;
  /* 或者直接在HTML标签内添加文本，如<a class="shop-now" href="#">立即购买</a> */
  

• 确保图片正确撑开容器
  检查<picture>内的<img>元素是否设置了正确的显示方式和尺寸，避免图片无法撑开父容器：

  picture img {
    display: block;
    width: 100%;
    height: auto;
  }
  

• 排除继承的高度属性
  检查全局样式或父级样式是否给.shop-now添加了height: 100%，若有则显式覆盖：

  .shop-now {
    height: auto;
  }
  

内容的提问来源于stack exchange，提问作者Louise Chan