Question

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

问题是，图块中的图片仅针对浏览器的宽度＆gt;调整大小。 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;
      }
    }
  }
}

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

希望这有帮助！

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

1 个答案: