定位高度有限的固定元件（最大高度）

Question

我正在尝试在我的网页右下角添加一个固定元素，这是我成功完成的。

我还用max-width: 30%;限制了它的宽度，因此在移动设备中它不会显示图像太大。我现在要做的是按屏幕高度调整图像。除媒体查询外，还有什么可以解决这个问题吗？

HTML：

<div id="cornerImg">
   <a href="my-site-link-here">
      <img src="image/source.jpg" />
   </a>
</div>

CSS：

#cornerImg {
   position: fixed;
   bottom: 0;
   right: 0;
   max-width: 30%; /* Already working as expected */
   max-height: 30%; /* Adjusts the visible part of the image, but overflowing */
}

所以我在屏幕上调整了图像的大小，但是当它处于max-height条件下时，它实际上并没有改变图像的大小。它只显示图像的顶部，使图像的其余部分不可见。

我知道如何将其作为Media Query，但我在这里寻求非MQ解决方案，如果可以的话。 提前谢谢！

编辑：如果出现任何媒体查询解决方案，请同时提供一些建议。似乎即使我可以通过最大高度调整图像的高度，它仍然会从屏幕溢出图像，所以在那一侧也没有运气。

Answer 1

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}

你可以试试这个