html - 100% sizing image inside div issue, unwanted space on left and right -
building webpage, , ran in trouble, here´s whats going on,
im building page using bootstrap´s grid, grid.
ive made staff page want 4 pictures side side, small margin between each image, pictures should squares aspect of 1:1
heres my: 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">
the image inside div cropped in 1:1
and has following css:
max-width: 100%; max-height: 100%; position:relative; display:block;
heres problem, reason image dosn't fill out div, image centered 1 em space on each side result in unwanted margin between images.
also how place magin between divs, without 1 of divs jumps down, when each div 20% of width.
i dont have enough reputation post images yet :/
try following: in css create class called .nopadding
(or want) assign following values padding-left:0; padding-right:0;
add <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 nopadding">
play around til desired result.
Comments
Post a Comment