VPHero image height does not scale for small viewports

[MarkusKeck]

Describe the bug

The VPHero image does only set the 'max-width' inside the media querys but not 'max-height'.
This leads to an overlap of the hero image and the content that follows it.

https://pinia.vuejs.org/ had the same problem with its hero image, beeing 214px in width and 320px in height.
They solved it by adding max-height to their custom css.

@media (min-width: 960px)
.VPHero .VPImage.image-src {
    max-height: 320px;
}
@media (min-width: 640px)
.VPHero .VPImage.image-src {
    max-height: 256px;
}
.VPHero .VPImage.image-src {
    max-height: 192px;
}
@media (min-width: 960px)
[data-v-be2bd16f] .image-src {
    max-width: 320px;
}
@media (min-width: 640px)
[data-v-be2bd16f] .image-src {
    max-width: 256px;
}

The better solution would be to just add it to the VPHero component.

Reproduction

Take an image which is not cubical, so has more height than width and set it as hero image

---
layout: home

hero:
      image:
        src: /assets/<image-name>.svg
        alt: alt-text

Expected behavior

The VPHero image height should scale like the width.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (32) x64 AMD Ryzen 9 3950X 16-Core Processor
    Memory: 36.46 GB / 127.82 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.7.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.50)    
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vitepress: ^1.0.0-alpha.13 => 1.0.0-alpha.47

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.