div 问题内的 100% 尺寸图像，左侧和右侧不需要 space

Question

建立一个网页，我运行遇到了一些麻烦，所以这是怎么回事，

我正在使用 bootstrap 的网格构建页面，但仅使用网格。

我制作了一个工作人员页面，我想要并排放置 4 张图片，每张图片之间的边距很小，图片的长宽比应为 1:1

这是我的：html；

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
                    <img src="img/product.jpg">
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
                    <img src="img/product.jpg">
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
                    <img src="img/product.jpg">
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
                    <img src="img/product.jpg">

div 中的图像在 1:1

中被裁剪

并具有以下 css：

max-width: 100%; max-height: 100%;
position:relative;
display:block;

这是问题所在，由于某种原因，图像没有填满 div，图像居中，每边大约有一个 em space，这导致图像之间出现不需要的边距图片。

另外，当每个 div 是宽度的 20% 时，我如何在 div 之间放置 magin，而没有 div 之一跳下。

我还没有足够的声誉来 post 图片 :/

Answer 1

尝试以下操作：在您的 css 中创建一个名为 .nopadding 的 class（或任何您想要的）为其分配以下值 padding-left:0; padding-right:0; 然后将其添加到<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 nopadding"> 试一试，直到你得到想要的结果。

div 问题内的 100% 尺寸图像，左侧和右侧不需要 space

100% sizing image inside div issue, unwanted space on left and right

html

margin