There are pictures that I want to place IN ONE LINE ON ALL SCREEN WIDTH so that the height of the pictures is the same RELATIVE TO A FRIEND OF A FRIEND at any resolutions, while each of them retains its proportions: not narrowed, not stretched and adjoined close to each other. And I would like to achieve cross-browser compatibility - is it real? link to fidl

* { margin:0; padding:0; } img { max-width:100%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <section class="row"> <div class="col-sm-3 col-xs-3"> <img src="http://placehold.it/598x396"> </div> <div class="col-sm-3 col-xs-3"> <img src="http://placehold.it/488x396"> </div> <div class="col-sm-3 col-xs-3"> <img src="http://placehold.it/605x396"> </div> <div class="col-sm-3 col-xs-3"> <img src="http://placehold.it/756x396"> </div> </section>

  • you can add max-height:нужная_высота instead of max-width - Umer
  • @Umer and how then to be with width? all the pictures do not completely fit ... jsfiddle.net/wzpy2d1p/5 - Vasya
  • one
    Just remove the bootstrap classes and make the divas the usual float: left - Grundy
  • one
    why did you leave max-width, if you have already been advised to have max-height? :-) for example, in principle, you can get by with the usual height - Grundy
  • one
    Let's continue the discussion in the chat . - Grundy

2 answers 2

So, the most elegant solution number 1 (Thanks @Grundy) - to merge all the pictures into one:

 * { margin: 0; padding: 0; } section: { overflow: hidden; } img { width: 100%; } 
 <section> <div> <img src="http://placehold.it/2447x396"> </div> </section>
answer 1

Solution # 2 without association without ie 8: answer 2 for ie 8 may be substituted (it was not possible to check for placehold.it)

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img.jpg', sizingMethod='scale')";

Solution # 3 with a script: Answer 3.1 or Answer 3.2

     .pad-img { padding: 2px; float: left; height: 50px; // vertical-align: top; }
    • You need to use the entire width of the screen and so that the pictures do not jump off to the 2nd line. the task is not as simple as it seems at first glance - Vasya
    • one
      in% set the width of the block with the image to use the entire width of the container - soledar10
    • @ soledar10 explain - for each image? - Vasya
    • one
      @ soledar10, then they can have different heights, depending on the initial proportions - Grundy
    • 2
      @ Vasya display flex using? jsfiddle.net/soledar10/q44xu0a9 - soledar10