異なるサイズの画像複数枚の高さを揃えた上で、全体の横幅を%指定することは可能でしょうか？[css,html,jQuery?]

Question

###前提・実現したいこと
異なるサイズの画像複数枚の高さを揃えて表示した上で、全体の比率を画面の幅に合わせたい。

「画像ソフトで一枚に連結してwidth: 100%;」するのが一般的だとは思うのですが
ソースコードの工夫のみで実現できれば、ブログ更新のシステムなどで便利だなあと思い、
質問させていただきました。

2017.8.14追記
ｊQueryなどで画面幅のpxを取得して、
その30%の値をcssに書き出して画像の高さとして指定…
というようなことができれば、概ね解決する気がしてきました。
自分でも調べてみていますが、もしご存知の方がいれば教えていただけたら嬉しいです。

###該当のソースコード

高さを揃えた状態
<div>
    <img src="https://placehold.jp/150x400.png" alt=""><img src="https://placehold.jp/3d4070/ffffff/200x300.png" alt=""><img src="https://placehold.jp/150x400.png" alt="">
</div>

<br>

div幅340px
<br>imgが改行されてしまう…<br>
高さがそろった状態で、改行せず画面幅に対していっぱいに表示したい
<div class="w340">
    <img src="https://placehold.jp/150x400.png" alt=""><img src="https://placehold.jp/3d4070/ffffff/200x300.png" alt=""><img src="https://placehold.jp/150x400.png" alt="">
</div>

div img{
  height:250px;
}

.w340{
  width: 340px;
  background-color: #252525;
  }

サンプル：https://jsfiddle.net/nssgmxx4/2/
過去サンプル：https://jsfiddle.net/nssgmxx4/1/

Answer 1

「改行せず画面幅に対していっぱいに表示したい」の具体的な状態がないので、
何とも言えないですが、例えば、CSSに以下を追加でいかがですか。

.w340{
display:flex;
overflow:hidden;
}

Comments

[shiroikoma]

少し切れてしまってもいい場合ならこれで大丈夫ですね！
参考になりました。ありがとうございます！

Answer 2

**「高さを揃えた上で、横幅ぴったり」**は難しかったので
**「画面の横幅の30%の高さで表示」**で解決しました。

<div class="news">
<img src="img/_news/__1.jpg" class="imgHS">
<img src="img/_news/__2.jpg" alt="" class="imgHS">
</div>

//初期
$(document).ready(function () {
  hsize = $(".news").width()*0.3;
  //.newsの横幅を取得して0.3倍する
  $(".imgHS").css("height", hsize + "px");
 //.imgHSのcssのheightに計算した値と単位のpxを書く
});

//画面リサイズ時
$(window).resize(function () {
  hsize = $(".news").width()*0.3;
  $(".imgHS").css("height", hsize + "px");
});

.news{
   width: 100%;
}
.imgHS{}