Question

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

我使用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像素，但网格系统会略微调整图像？

网格系统使用的尺寸/尺寸是多少？

非常感谢

Answer 1

我认为您需要的只是一些css，以使您的图像被采用到设备的屏幕上。我通常做的一个好习惯是将这行代码放在我的CSS中。

img { max-width: 100%; }

确保它位于您首次导入的文档的顶部，因此您可以在不需要其他图像宽度的情况下完全覆盖它。

PS。此规则应该在bootstrap中，因此请检查如何将bootstrap添加到您的网页。

Answer 2

您可以为此背景图片添加css。

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

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

CSS Bootstrap网格系统的维度

2 个答案: