问题是,图块中的图片仅针对浏览器的宽度>调整大小。 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;
}
}
}
}
答案 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;
}
希望这有帮助!