Bootstrap3 非整数宽度和响应式图像

Question

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

使用具有 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%才能重新计算要保持的高度。

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

我的问题是：如何用 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 基于百分比宽度的质量损失......我敢肯定，我不是唯一遇到这个问题的人。

提前感谢您的任何建议。

Answer 1

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

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

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