Чтобы выровнять изображение по нижнему краю с помощью CSS, можно использовать несколько методов. Вот несколько примеров:

Метод 1: использование Flexbox

<style>
    .container {
        display: flex;
        align-items: flex-end;
    }
</style>
<div class="container">
    <img src="your-image.jpg" alt="Your Image">
</div>

Метод 2. Использование позиционирования

<style>
    .container {
        position: relative;
    }
    .image {
        position: absolute;
        bottom: 0;
    }
</style>
<div class="container">
    <img class="image" src="your-image.jpg" alt="Your Image">
</div>

Метод 3. Использование сетки

<style>
    .container {
        display: grid;
        align-items: end;
    }
</style>
<div class="container">
    <img src="your-image.jpg" alt="Your Image">
</div>

Метод 4: использование вертикального выравнивания (для строчных элементов)

<style>
    .image {
        vertical-align: bottom;
    }
</style>
<img class="image" src="your-image.jpg" alt="Your Image">

Метод 5: использование ячейки таблицы

<style>
    .container {
        display: table;
    }
    .cell {
        display: table-cell;
        vertical-align: bottom;
    }
</style>
<div class="container">
    <div class="cell">
        <img src="your-image.jpg" alt="Your Image">
    </div>
</div>