CSS调整图像大小不接受参数

Question

我正在尝试调整图片大小。启用了Bootstrap。

这是我的CSS：

/*Custom picture fix*/
@media(max-width:600px){
  .picturerow>img {
    width: 10px;
    height: auto;
  }
}

这是我的HTML：

<div class="picturerow">
    <ul>
        <li><img src="{{ asset('assets/img/icons-medium/facebook-medium.png') }}" alt="facebook-icon">  </li>   
        <li><img src="{{ asset('assets/img/icons-medium/linkedin-medium.png') }}" alt="linkedin-icon"> </li>   
        <li><img src="{{ asset('assets/img/icons-medium/twitter-medium.png') }}" alt="twitter-icon"> </li>   
        <li><img class="img-responsive" src="{{ asset('assets/img/icons-medium/xing-medium.png') }}" alt="xing-icon"> </li>   
        <li><img class="img-responsive"  src="{{ asset('assets/img/icons-medium/google-medium.png') }}" alt="google-icon"> </li>   
     </ul>
</div>

我做错了什么？

图片应全部内嵌显示，对于md和更小（不低于，sass等）的屏幕尺寸，它们应显示在中间。 在非常小的屏幕上，图片应该都是15px宽度并保持比例。

Answer 1

Bootstrap的类img-responsive可能会覆盖您的自定义类。

更重要的是，当您使用>时，就像在.picturerow>img中一样，您告诉CSS图像是picturerow div的直接子项，这是错误的，因为您有{{1}之前和<ul>。