html - 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 图像是图片行 div 的直接子元素，这是错误的，因为你有 <ul>和 <li>之前。