DIV与最大宽度和最大高度和保留比例（仅CSS）

好吧，这是一个具有挑战性的！我真的想看看这是否可以用CSS完成如果可能的话。DIV与最大宽度和最大高度和保留比例（仅CSS）

我有一个独特的布局，要求图像的大小和位置根据他们的父容器。如果图片超过它的高度或宽度的父母，我需要它缩小大小以适应。目前，我一起使用最大宽度和最大高度，并且工作正常。图像调整大小以适应并保持高宽比。

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

通常我会做到的阴影与::后的大小和位置使其相对于它的父元素，它完美的作品除了它的父是图像和图像不允许::之前或之后:: 。

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

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

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

我搜索了一个解决方案的互联网，并没有看到任何人描述这种确切的情况。非常感谢任何能够提供帮助的人。

新增2017年9月1日：

我应该指出，这不仅仅是影子，我需要相对于图像定位更多。还有一些其他元素需要以这种方式定位，而其他元素不是简单的背景图像。因此，尽管Lightbender的解决方案对于影子来说非常棒，但它并不能解决眼前的大问题。我需要一个容器周围的图像，我可以用它作为参考来定位其他子元素。

来源

2017-08-29 Benek Lisefski

虽然之前和之后都不会工作（很容易），但仍然可以使用填充和背景图像，并且它将以您当前的设置工作方式完全工作。

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浏览器呢？

来源

2017-08-30 19:35:30 LightBender

简单的解决方案。我会尽快尝试，并确认它是否适用于我的情况。 –

这看起来像是一个很好的阴影解决方案。尽管我现在意识到我不仅需要这个解决方案，还需要这个解决方案。在一些页面上，还有其他元素需要相对于图像进行定位（例如，绝对定位好像图像是相对父元素）。所以为了让这些工作，我确实需要一个解决方案，在该图像周围包装一个容器，以便我可以使用容器来定位这些其他元素。所以我赞赏这个解决方案对于影子的简单性，但不幸的是它并没有解决整个问题。 –

我不认为你可以用你想像的方式在纯css中做到这一点，因为max-height不会影响包含图像的高度。相反，图像会尊重宽度和溢出。我从来没有尝试过，但它可能会为您提供一种可行的方法。 https://stackoverflow.com/a/10804311/8533154对不起，我的解决方案并没有解决你的整个问题，最好的运气:) – LightBender

所以我想看一个简单的例子，你试图作为一个起点，但你提到的图像需要根据其容器的大小进行大小/定位。

下面是一个类似的例子。不知道它是否可以修改以适应您的问题。让我知道，我可以调整。

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

文档：

盖缩放的背景图像，使背景区域由背景图像完全覆盖要尽可能大。背景图像的某些部分可能不是考虑到背景定位区域之内

包含缩放图像以最大尺寸，使得它的两个宽度和它的高度可以容纳内容区域

内部这是我没有想到的又

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

来源

2017-08-30 19:49:16 flyer

感谢您的回复，但我正在尝试仅使用CSS解决方案。将仅使用Javascript作为最后的手段。 –

哦，我只用这里的javascript来演示容器越来越大。我试图强调的是在CSS中使用background-image和background-position和background-size。通过这种方式，你可以用IMG标签获得更多的图像控制权。 – flyer

我已经更新了演示文稿以调整大小手柄 - 这只是为了演示图像的响应特性，当您通过CSS设置它们时。 – flyer

DIV与最大宽度和最大高度和保留比例（仅CSS）

回答

相关问题