具有最大宽度和最大高度的 Div 并保留比例（仅限 CSS）

Question

好的，这是一个具有挑战性的！如果可能的话，我真的很想看看这是否可以通过 CSS only 来完成。

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

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

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

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

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

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

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

2017 年 9 月 1 日添加：

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

Answer 1

虽然之前和之后无法正常工作（很容易），但您仍然可以使用内边距和背景图片，它的工作方式与您当前设置的工作方式完全相同。

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吗？

Answer 2

所以我想看一个简单的例子来说明你正在尝试什么作为起点，但你提到需要根据容器的大小调整图像的大小/位置。

这是一个类似的例子。不确定是否可以对其进行修改以适应您的问题。告诉我，我可以调整。

当需要响应式图片时，我从不使用 IMG 标签。在 CSS 中设置背景图片可以更好地控制响应式网站/应用程序。

关于背景尺寸的文档：

cover 将背景图像缩放到尽可能大，使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域内查看

包含 将图像缩放到最大尺寸，使其宽度 并且它的高度可以放在内容区域内

$(function() {
  $('.banner').resizable();
});

.banner {
  background-image: url('https://s-media-cache-ak0.pinimg.com/originals/15/ae/a6/15aea601612443d5bddd0df945af6ffd.jpg');
  background-size: cover; 
  background-position: center;
  height: 175px;
  width: 100%;
}

p {
  color: #666;
}

.ui-resizable-se {
  box-shadow: -1px -3px 10px 3px white;
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<h1>Resize the image using the black triangle at bottom right of image</h1>
<p>Note how the image fills the container and the position is always centered (you can control where the position is, doesn't have to be in the center)</p>

<div class="banner">
</div>