图片不会在特定浏览器的宽度下调整大小

时间:2014-05-26 18:58:00

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

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

问题是,图块中的图片仅针对浏览器的宽度>调整大小。 512x512像素。对于每行2个图像,图像不会缩小到240px以下,并且对于每行1个图像,图像保持其默认宽度 - 480px。尽管设置如下:

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;
      }
    }
  }
}

1 个答案:

答案 0 :(得分:2)

在我看来,这个问题是由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;
}  

希望这有帮助!