Сделать изображения одинаковыми по высоте средствами CSS

В поисках решения такой задачки было взято простое решение. Выводились изображения разной высоты и разной ширины, чтобы упорядочить их по высоте нужно было средствами css изменить стиль отображения. Размеры изображений не известны, ровно как и ширина их. Оказалось, что сталкиваются с такими задачами практически все. Подумалось, что простое решение может быть таким:

img {
    height: 100px;
    width: auto;
    margin: 0 10px;
}

Но, это как-то слишком некрасиво. Случайно заглянул на схожее обсуждение и нашел вполне пригодное решение для этих целей:

<div class="container">
    <div class="element">
        <img src="https://www.muzeumlotnictwa.pl/digitalizacja_archiwaliow/katalog/ksiazki/10/platowiec_pws_26_katalog_czesci/13d.jpg" />
    </div>
    <div class="element">
        <img src="https://cdn.doublemesh.com/wp-content/uploads/2013/08/SendPress-Email-Marketing-and-Newsletters.jpg" />
    </div>
    <div class="element">
        <img src="https://media.moddb.com/images/downloads/1/1/373/profile.jpg" />
    </div>
</div>

И css для этого кода:

.element
{
    overflow:hidden;
    width:100px;
    height: 100px;
    border: 1px #000 solid;
    margin: 5px;
    float: left;
    
    position: relative;
}

.element img
{
    position: absolute;
    top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}