CSS Bootstrap Grid 系统的维度答案

【问题标题】：Dimension of CSS Bootstrap Grid systemCSS Bootstrap Grid 系统的维度
【发布时间】：2017-02-17 11:32:57
【问题描述】：

我正在为一家公司创建一个网站，他们的摄影师问我网站上的图片是什么尺寸。

我使用 CSS Bootstrap 和网格系统，例如：

<div class="col-md-12"> <div class="fh5co-grid" style="background-image: url(images/xxxx-1-2.jpg);"> <a class="image-popup text-center" > <div class="prod-title "> <h3 style="height:5%;"> “text"”</h3> </div> </a> </div> </div>

所以在服务器上图像的大小是 474 x 698 像素，但是网格系统会稍微裁剪图像？

网格系统使用什么尺寸/尺寸？

非常感谢

【问题讨论】：

标签： html css image twitter-bootstrap

【解决方案1】：

我认为您只需要一些 css 就可以让您的图像适应设备的屏幕。我通常做的一个好习惯是把这行代码放在我的 css 中。

img { max-width: 100%; }

确保它位于您导入的第一个文档的顶部，以便在需要其他图像宽度时轻松覆盖它。

PS。此规则应在引导程序中，因此请检查如何将引导程序添加到您的网页。

【讨论】：

明确一点：网站已经完成，一切都很好。只需要他的尺寸..确实，在引导程序中：.col-md-4 { width: 33.33333%; } 例如。但是我如何建议采用宽度等的尺寸？

【解决方案2】：

你可以做的是为这个背景图片添加一个CSS。

.fh5co-grid{
    background-image: url(images/xxxx-1-2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

如果您想确保此代码将获得全屏宽度，请确保您的 html col-lg-12 包装在 container-fluid 上。

【讨论】：