图片不会调整到低于特定浏览器的宽度答案

【问题标题】：Images won't resize below certain browser's width图片不会调整到低于特定浏览器的宽度
【发布时间】：2014-05-27 09:29:07
【问题描述】：

网站可用here。完整的 CSS 可以访问here。

问题是图块中的图像仅针对浏览器的宽度 > 512 像素调整大小。对于每行 2 个图像，图像不会缩小到 240 像素以下，对于每行 1 个图像，图像保持默认宽度 - 480 像素。尽管设置，它仍然发生：

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

我正在使用 Bootstrap 的 tiles-row 类 (v. 2.3.2) 并遵循媒体查询来更改每行的磁贴数：

@4-per-row: 100% / 4;
@2-per-row: 100% / 2;
@1-per-row: 100% / 1;

(...)

@media (min-width: 768px) { 
  body {
    .tiles-row {
      figure {
        width: @4-per-row;
      }
    }
  }
}


@media (max-width: 767px) {    
 body {
  .tiles-row {
    figure {
      width: @2-per-row;
    }
  }
}

/* below img's default width */
@media (max-width: 480px) { 
  body {
    .tiles-row {
      figure {
        width: @1-per-row;
      }
    }
  }
}

【问题讨论】：

标签： html css twitter-bootstrap responsive-design twitter-bootstrap-2

【解决方案1】：

在我看来问题是由 http://vanfolmert.com/opta_single/css/default.css 的第 1 行开始的正文规则引起的

尝试注释掉或重新考虑最小宽度

body {
    background-color: #273B42;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-top: 61px;
    /* min-width: 480px; */
    font-family: 'Open Sans', cursive, sans-serif;
    font-size: 14px;
}

希望这会有所帮助！

【讨论】：