Как расположить картинки в одну строку с сохранением пропорций и одинаковой высотой?

Question

[ligisayan]

Есть картинки, которые хочу разместить в одну строку так, чтобы высота картинок была одинакова на любых разрешениях, при этом каждая из них сохраняла свои пропорции: не сужались, не растягивались и примыкали друг к другу вплотную. И хотелось бы добиться кроссбраузерности - реально?
ссылка на фидл

* {
	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-xm-3">
    <img src="http://placehold.it/598x396">
  </div>
  <div class="col-sm-3 col-xm-3">
    <img src="http://placehold.it/488x396">
  </div>
  <div class="col-sm-3 col-xm-3">
    <img src="http://placehold.it/605x396">
  </div>
  <div class="col-sm-3 col-xm-3">
    <img src="http://placehold.it/756x396">
  </div>
</section>

Comments

[ligisayan]

"при уменьшении высоты ширина тоже уменьшится при сохранении пропорций то" я и не спорю
"если средствами клиента решать то либы есть такие" поясните, что это такое

Answer 1

[ligisayan]

Итак, самое изящное решение №1 - склеить все картинки в одну:

<section>
  <div>
    <img src="http://placehold.it/2447x396">
  </div>
</section>

* {
  margin: 0;
  padding: 0;
}
section: {overflow:hidden;}

img {
  width:100%;
}

https://jsfiddle.net/wzpy2d1p/20/

решение №2 без объединения без ie 8:
https://jsfiddle.net/wzpy2d1p/23/
для ie 8 возможно подставить (на placehold.it проверить не удалось)

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

решение №3 со скриптом
https://jsfiddle.net/wzpy2d1p/19/
или
https://jsfiddle.net/wzpy2d1p/17/

Answer 2

[Андрей Шедько]

Используйте flex. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

[ligisayan]

Андрей Шедько flex не кроссбраузерный. правильные ответы я уже дал выше

[Андрей Шедько]

В самом деле? caniuse.com/#feat=flexbox

[ligisayan]

Андрей Шедько ну конечно! вы на explorer обращаете внимание? я прекрасно осведомлен о поддержке флексаи и не был голословен, когда это заявлял. только не давайте не будем пытаться убеждать, что ie уже безнадежно вымерли и ими никто не пользуется. (даже caniuse показывает 8) кроссбраузерно - означает с поддержкой ie - в вопросе это было