如何在不干扰其他 CSS 属性的情况下正确地将 CSS 中的 background-image 属性传输到 HTML 代码中？

Question

我首先在 div 中使用 'background-image' CSS 属性来显示图像，因为它可以像我一样正确显示想要它：

图像位于导航栏下方（允许显示阴影）。
图像是边到边的，但只容纳了不到 30% 的部分屏幕高度根据用户屏幕尺寸。
图像允许 semi-transparent 覆盖标题和图片说明。
图像将填充（裁剪）以适合 canvas 而不是拉伸缩小或缩小。

如何将 'background-image' CSS 属性作为标签转移到 HTML 中？ As CSS 不支持替代文本，因为它们是我通过考试所必需的。

I've tried to add a tag into HTML and removed background-image property from HTML (also ruleset name to accommodate the added img tag) However, it doesn't display it correctly as I wanted it to be.

== 代码 ==

旧代码：
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.细节保持不变)

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

我希望它是这样的： Expected (original result)
相反，我得到了这个： The result of changing the code

除此之外，我还希望我的图像在调整屏幕大小时集中在图像的中心，而不是仅仅裁剪底部。

谢谢。这可能太具体了，但我相信这会帮助那些也使用 CSS 背景图像而不是 HTML 标签的人。

Answer 1

检查这个pen
在我看来，您的代码没有任何问题。
用于将图像居中对齐使用

 background-position: center;

如果您使用 img 标签在属性下方使用图像。

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

Answer 2

为什么要使用背景图片？你可以使用这个

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

然后是css

img {
//css
}

如何在不干扰其他 CSS 属性的情况下正确地将 CSS 中的 background-image 属性传输到 HTML 代码中？

How to correctly transfer background-image property in CSS in to HTML code without disrupting other CSS property?

html

css

image

background-image

如何在不干扰其他 CSS 属性 的情况下正确地将 CSS 中的 background-image 属性 传输到 HTML 代码中？

How to correctly transfer background-image property in CSS in to HTML code without disrupting other CSS property?

html

css

image

background-image

如何在不干扰其他 CSS 属性的情况下正确地将 CSS 中的 background-image 属性传输到 HTML 代码中？