1

我很想知道您如何解决以下问题。

使用具有 24 列和 30 像素的网格间距的 Bootstrap 3。在宽屏显示中，我使用 col-7 作为左侧边栏，使用 col-17 作为主要内容。问题是引导程序正在用百分比计算宽度。所以我有 339.5px (29.16667%) 用于侧边栏，824.484px (70.83333%) 用于内容。

<div class="row">
  <aside class="col-lg-7">[sidebar]</aside>
  <div class="col-lg-17">[main content]</div>
</div>

现在，我使用一些脚本，如lazysizes 和lazyaspectratio 来延迟加载我的图片，并让图像容器保持相同的尺寸，即使图像尚未加载也是如此。使用lazyaspectratio，宽度必须为 100% 才能重新计算要保留的高度。

但是...因为有一个但是...如果我的主要内容是 824.484px 宽度，图片也是 824.484px 宽度，并且图片质量很差。假设我的图片显示必须是 824 像素，最终的图片显示很糟糕，而且我失去了质量，即使比例得到尊重。

我的问题是：如何用 img > width=100% 绕过这个问题？

我在几个线程上看到人们“修复”了行子的宽度，如下所示：

div.row > aside.col-lg-7 {
  width: 340px;
}
div.row > div.col-lg-17 {
  max-width: 824px;
}

保持 img > width = 100% 并具有整数列宽度似乎是一个很好的解决方案，但是使用此解决方案，我必须添加许多 css 规则来管理多个 col-* 和多个媒体查询...

你呢 ？你如何解决这种问题？因为我认为使用宽度 = 100% 的 img-responsive 类会导致 Bootstrap 3 基于百分比宽度的质量损失......我确信我不是唯一遇到这个问题的人。

提前感谢您的任何建议。

4

1 回答 1

0

Andrejs：您可以在以下位置自定义引导程序：http: //getbootstrap.com/customize/

titouille：您可以创建一个 Javascript，根据它们的类或父级将图像宽度向下舍入。

对于您在 col 或 parent 的宽度中读取的每个图像元素，并将其设置为（向下延伸到 1 px），因为它是 max-width

于 2015-10-23T12:56:31.813 回答