Как правильно перенести свойство background-image в CSS в код HTML, не нарушая другое свойство CSS?

Question

Сначала я использовал CSS-свойство background-image в div для отображения изображения, так как оно отображается правильно, как я хотел:

1. изображение находится ниже навигационной панели (позволяет отображать тень).
2. Изображение - от края до края, но в зависимости от размера экрана пользователя оно занимает не более 30% высоты экрана.
3. Изображение допускает полупрозрачное наложение заголовка и описания изображения.
4. Изображение будет заполняться (обрезаться), чтобы соответствовать холсту вместо растяжения или сжатия.

Как перенести CSS-свойство background-image в HTML как тег? Поскольку CSS не поддерживает альтернативный текст, так как он необходим для сдачи экзамена.

Я пытался добавить тег в HTML и удалил свойство background-image из HTML (также имя набора правил для размещения добавленного тега img). Однако он не отображается правильно, как я хотелэто будет.

== КОД ==

Старый код:
CSS:

.image-container {
    padding-top: 10px;
    width: 100%;
    height: 48vw;
    min-height: 380px;
    max-height: 550px;
    background-image: url('/assests/DisplayImage.jpg');
    background-size: cover;
    position: relative;

.image-container .detail {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 0;
    text-align: center;
}

HTML:

    <div class="image-container">
        <div class="=detail">
            <h1>
                Title text
            </h1>
            <h3>
                Description
            </h3>
        </div>
    </div>

Новый код:
HTML:

    <div class="image-container">
      <img scr=/assests/DisplayImage.jpg>
        <div class="=detail">
            <h1>
                Title text
            </h1>
            <h3>
                Description
            </h3>
        </div>
    </div>

CSS: (.image-container .detail остаются прежними)

.image-container img{
    padding-top: 10px;
    width: 100%;
    height: 48vw;
    min-height: 380px;
    max-height: 550px;
    position: relative;
}

Я ожидаю, что это будет так: Ожидаемый (исходный результат)
Вместо этого я получил это: Результат смены трескиe

В дополнение к этому я также хотел, чтобы мое изображение было сфокусировано по центру изображения при изменении размера экрана вместо просто обрезки нижней части.

Спасибо.Это может быть слишком конкретным, но я уверен, что это поможет тем, кто также использовал фоновое изображение CSS вместо тега HTML.

Answer 1

Почему вы используете фоновое изображение?Вы можете использовать это

 <img src="// url " alt ="// text"> 

А затем CSS

img {
//css
}

Answer 2

Отметьте ручка В вашем коде нет ничего плохого, как я вижу.Для выравнивания изображения по центру используйте

 background-position: center;

Если вы используете тег img для изображения, используйте следующие свойства.

object-fit: cover;
object-position: bottom;