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

你应该试试这个：

add("key",Json.createArrayBuilder(...))

Answer 2

与此处的评论不同，我认为你的问题不是背景大小，而是你的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 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，无论是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>

如何使用媒体标签制作响应式图像？

4 个答案: