Html 按背景或子img划分的div大小

我有一个图像要在浏览器窗口中完全显示（采用100%宽度或100%高度）。我可以这样做：

    .myClass {
        background-image: 'path/to/image.jpg';
        background-size: contain;
    }

    <div class='myClass'></div>

.myClass{
背景图像：“path/to/image.jpg”；
背景尺寸：包含；
}

或者这个：

    .myClass img {
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
     }

     <div class='myClass'>
         <img src='path/to/image.jpg'>
     </div>

.myClass img{
最大宽度：100%；
最大高度：100%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

困难在于我需要一个大小等于所显示图像大小的

div

，以便在该图像上显示内容。我不能通过背景设置

div

大小，也不能通过绝对定位的子

img

设置父

div

大小

当然，我可以使用js，但我想不用它。你知道我该怎么做吗