如何设置位置：固定了可调整大小的图像

Question

我正在尝试在固定的图像上创建网站行的效果，但是我希望图像能够适当调整大小，以使其看起来不会过于压缩。我尝试了背景图片，并使用背景附加尺寸对其进行了调整：但我无法自动更改行的高度，因为从技术上讲div中没有​​内容。

现在，我正在使用图像，并为其分配一个基于百分比的宽度和高度，并将父div（列）设置为height：auto ;，这一切都很好，除了我的图像没有固定。

当我添加位置时：固定；对图像，它执行以下两项操作之一：
1.如果设置z-index，它会固定在页面上并覆盖整个屏幕 2.如果未设置z-index，则高度为：auto;属性将被忽略，并且图像不再可见

CSS：

.B4_fixed_image {
    height: auto;
}

.gfx-image-filler {
    height: 50%;
    width: 100%;
}

HTML：

<div class="col-12 col-m-12 B4_fixed_image">

<img src="../images/gfx-filler-image.jpg" class="gfx-image-filler">

</div>