html - CSS调整图片大小不接受参数

我正在尝试调整图像大小。引导程序已启用。



这是我的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宽度并保持比例。

最佳答案

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

更重要的是，当您使用>时（例如在.picturerow>img中），您要告诉CSS图像是picturerow div的直接子代，这是错误的，因为之前已经有<ul>和<li>。