如何使响应图像与媒体标签

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>标签，因为它更容易让父元素自动调整到它(它甚至是默认行为)。

Answer 2

你应该试试这个:

background-size: 100% auto;

Answer 3

试试这个

<ul class="list-unstyled">
    <li><a href="#" id="Feature1"  >
      <img src="./link/to/img" alt="...">      
    </a></li>
    <li><a href="#" id="Feature2"  >
      <img src="./link/to/img" alt="...">
    </a></li>
</ul>
//so it will display a responsive image only 480px bellow
@media screen and (max-width: 480px) { 
  a[id*="Feature"] img{
    max-width:100%;
    height: auto;
  }
}
//so it does not display the image anywhere else
a[id*="Feature"] img{
  display:none;
}

因此，在锚中包含id为(Feature)的所有图像，无论是1,2,3…将显示一个响应图像..

希望这能回答你的问题 T04435

Answer 4

试试这个:

使图像适应小屏幕的最简单技术是在媒体查询中包含以下CSS规则:

img {
max-width: 100%;
height: auto;
}

输入元素。作为HTML5的一部分，元素是一个完整的解决方案，不需要额外的脚本或第三方服务来完成这项工作。

语法如下:

 <picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>