Tell me, what do I need to write, so that the pictures stretch across the width of the entire screen? [ what is it should be

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="row"> <div class="col-sm-4"> <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" /> </div> <div class="col-sm-4"> <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" /> </div> <div class="col-sm-4"> <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" /> </div> </div> </div> </div> </div>

  • It is not clear what the result should be .. - Michael Vaysman Nov.
  • the pictures should be stretched to the width, but gaps appear instead - ChromeChrome
  • @ChromeChrome what exactly does not work with width:100% - Alex

2 answers 2

 div.container { padding:0; width:100%; } div.row, div.col-sm-12 { margin:0; padding:0; } div.col-sm-4 { width:33.333%; /* на 3-и дива, 25% на 4-е дива и т.д. */ padding:0; } div.col-sm-4 img { width: 100%; }
  • Well, how does it work? - Michael Vaysman
  • yes it works, but another problem appears in the first block on the left is indent and the third block is indented on the right - ChromeChrome
  • Add a style to the div.container as in reply - Michael Vaysman
  • No change, if you use div.container, as in the answer. By the way, if you use container-fluid - it works, but a scrollbar appears below - ChromeChrome
  • Try as in the answer, I finished it. - Michael Vaysman

Perhaps the attribute "Width" fit you:

  <img width="100%" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" />
  • tried it, it does not work ( - ChromeChrome
  • @ChromeChrome, try <img style = "width: 100%" ... - grnch