html - 具有最大宽度和最大高度并保留比例的 Div(仅限 CSS)

Question

好的，这是一个具有挑战性的问题!如果可能的话，我真的很想看看这是否可以通过仅使用 CSS 来实现。

我有一个独特的布局，需要根据父容器调整图像的大小和位置。如果图像在高度或宽度上超过它的父图像，我需要它缩小尺寸以适合。目前我同时使用 max-width 和 max-height 并且工作正常。图像会调整大小以适合，当然会保持其纵横比。

现在是棘手的部分。我需要给这张图片添加一个特殊的阴影，这是 CSS 框阴影无法实现的。阴影使用 PNG 图像。阴影需要根据图像调整大小和位置 - 这意味着它落在图像的底部并且等于图像的宽度。

通常我会使用::after 和大小实现阴影，并将其相对于它的父元素定位，这完美地工作 Except 它的父元素是图像和图像不允许::before 或::after。

据我所知，实现此目的的唯一方法是将图像包装在另一个容器中，这样我就可以将该容器用作阴影层的父元素和定位引用。 但是 我找不到一种方法使该容器 div 在最大宽度和最大高度调整方面的行为与图像相同，同时仍保持其纵横比比率。

保持纵横比的最佳方法是使用顶部填充，当宽度是唯一重要的因素时，这种方法非常有效。但是 padding-top 技术不允许容器具有最大高度。

所以我正在寻找一种 CSS 技术，它允许 block 元素保持其纵横比，并同时具有最大宽度和最大高度。类似于图像在这种情况下的行为方式。

我在互联网上搜索了解决方案，但没有看到任何人描述这种确切情况。非常感谢任何可以提供帮助的人。

2017 年 9 月 1 日添加:

我应该提一下，我需要相对于图像定位的不仅仅是阴影。还有一些其他元素也需要以这种方式定位，这些其他元素不是简单的背景图像。因此，虽然 Lightbender 的解决方案非常适合阴影，但它并没有解决手头的更大问题。我需要一个围绕图像的容器，我可以将其用作定位其他子元素的引用。

Answer 1

虽然 before 和 after 不会(很容易)起作用，但您仍然可以使用填充和背景图像，它会完全按照您当前设置的方式工作。

img.fancyshadow {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 0 10px 10px 0; /* adjust as needed */
    background: url('path/to/your/shadow');
    box-sizing: border-box;
}

我手边没有 Mac，所以我只在 Firefox、Chrome 和 IE 中测试过这个，有人可以确认 Safari 吗？