Question

好的，这是一个具有挑战性的！我真的想看看是否可以使用 仅CSS 来实现这一点。

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

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

通常情况下，我会用:: after和大小来定位阴影并将它相对于它的父元素定位，它完美地工作除了它的父级是图像和图像做不允许:: before或:: after。

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

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

所以我正在寻找一种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中设置背景图像可以更好地控制响应式网站/应用程序。

background-size 的文档：

封面将背景图像缩放到尽可能大，以便背景图像完全覆盖背景图像。背景图像的某些部分可能不在背景定位区域中的视野中

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

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

2 个答案: