html - 如何制作带有媒体标签的响应式图片？

Question

我的响应式 div 标签有这些 ul 和 li。我有一个 CSS 来设置标签的背景。

<ul class="list-unstyled">
    <li><a href="#" id="Feature1"  ></a></li>
    <li><a href="#" id="Feature2"  ></a></li>
</ul>

CSS:

 @media screen and (max-width: 480px) {      
    #Feature1{background: url('../img/Feature1.png');
       background-repeat: no-repeat;
       background-size: 60px auto;
       display: inline-block;width:60px;height:30px;}
    }

标签背景图像未调整大小。

我尝试过使用标签的 100% 宽度和高度，但这并没有解决问题。

Answer 1

与此处的评论不同，我认为您的问题不在于背景大小，而在于您的 a 元素。我认为您的预期结果是根据宽度自动调整高度。

你可以这样解决这个问题:

@media screen and (max-width: 480px) {      
  #Feature1{
    background: url('../img/Feature1.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: inline-block;
    width:100%;
    padding-bottom: 50%;
  }
}

因为垂直填充是相对于元素宽度的。所以 60x30 比率表示 padding-bottom: 50%如果你有一个方形图像，你会使用 padding-bottom: 100% ;

就我个人而言，我会选择 <img>在这里标记，因为它更容易让父元素自动调整它(它甚至是默认行为)。