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

Question

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

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

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

通常我会使用 ::after 实现阴影并调整大小并将其相对于父元素定位，这非常有效 Except它的父级是图像，图像不允许 ::before 或 ::after。

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

保持宽高比的最佳方法是使用填充顶部，当宽度是唯一重要的因素时，它的效果非常好。但是 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

所以我想看一个简单的示例，说明您尝试的内容作为起点，但您提到图像需要 sized/positioned 基于容器的大小。

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

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

关于 background-size 的文档：

cover Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

contain Scale the image to the largest size such that both its width and its height can fit inside the content area

$(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>

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

Div with max-width and max-height and retain proportions (CSS only)

html

css

image

sass

aspect-ratio