画像によって高さが変わる

Question

Vue.jsを使って画像をimgタグで表示しています

<div v-if="e.image.url"><img :src="e.image.url" class="article-icon"></div>

css

  .article-icon {
    width: 140px;
    height: 100%;
    border: 1.8px solid  rgb(192, 189, 189);
  }

画像によって高さが変わります
heightをpx指定にすると統一されるのですが、100%だとバラつきがあります(2通りに分かれる)
height100%をコメントアウトしてみると、影響が出る画像と全く影響が出ない画像があります(2通り)

何が原因なのでしょうか？よろしくお願いします

Answer 1

周りにかかってる要素のCSSとかも見てみないと確かなことは言えないですが、
SVGのようなベクター画像と、jpgやpngのようなビットマップ画像でもしかしたら違いが出るかも知れないと思いました。
ちなみに、height: auto;としてあげることで画像比を保ったまま高さを出すことができます。