DIV与最大宽度和最大高度和保留比例(仅CSS)
好吧,这是一个具有挑战性的!我真的想看看这是否可以用CSS完成如果可能的话。DIV与最大宽度和最大高度和保留比例(仅CSS)
我有一个独特的布局,要求图像的大小和位置根据他们的父容器。如果图片超过它的高度或宽度的父母,我需要它缩小大小以适应。目前,我一起使用最大宽度和最大高度,并且工作正常。图像调整大小以适应并保持高宽比。
现在,这里是棘手的部分。我需要为这个图像添加一个特殊的阴影,而这个阴影不能用CSS阴影框来实现。阴影使用PNG图像。阴影需要根据图像调整大小和放置位置 - 这意味着它落在图像的底部,它等于图像的宽度。
通常我会做到的阴影与::后的大小和位置使其相对于它的父元素,它完美的作品除了它的父是图像和图像不允许::之前或之后:: 。
所以,据我所知,实现这一目标的唯一方法是将图像包装在另一个容器中,以便我可以使用该容器作为父级元素和阴影图层的定位参考。 但是我无法找到一种方法来使容器div的行为与图像的最大宽度和最大高度的大小相同,同时仍然保持纵横比。
保持高宽比的最佳方法是使用填充顶部,当宽度是唯一重要因素时,它的出色表现非常出色。但是,填充顶部技术不允许容器具有最大高度。
所以我正在寻找一种CSS技术,可以让块元素保持其纵横比,同时具有最大宽度和最大高度。类似于图像在这种情况下的表现。
我搜索了一个解决方案的互联网,并没有看到任何人描述这种确切的情况。非常感谢任何能够提供帮助的人。
新增2017年9月1日:
我应该指出,这不仅仅是影子,我需要相对于图像定位更多。还有一些其他元素需要以这种方式定位,而其他元素不是简单的背景图像。因此,尽管Lightbender的解决方案对于影子来说非常棒,但它并不能解决眼前的大问题。我需要一个容器周围的图像,我可以用它作为参考来定位其他子元素。
虽然之前和之后都不会工作(很容易),但仍然可以使用填充和背景图像,并且它将以您当前的设置工作方式完全工作。
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浏览器呢?
所以我想看一个简单的例子,你试图作为一个起点,但你提到的图像需要根据其容器的大小进行大小/定位。
下面是一个类似的例子。不知道它是否可以修改以适应您的问题。让我知道,我可以调整。
当需要有响应图像时,我从不使用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>
简单的解决方案。我会尽快尝试,并确认它是否适用于我的情况。 –
这看起来像是一个很好的阴影解决方案。尽管我现在意识到我不仅需要这个解决方案,还需要这个解决方案。在一些页面上,还有其他元素需要相对于图像进行定位(例如,绝对定位好像图像是相对父元素)。所以为了让这些工作,我确实需要一个解决方案,在该图像周围包装一个容器,以便我可以使用容器来定位这些其他元素。所以我赞赏这个解决方案对于影子的简单性,但不幸的是它并没有解决整个问题。 –
我不认为你可以用你想像的方式在纯css中做到这一点,因为max-height不会影响包含图像的高度。相反,图像会尊重宽度和溢出。我从来没有尝试过,但它可能会为您提供一种可行的方法。 https://*.com/a/10804311/8533154对不起,我的解决方案并没有解决你的整个问题,最好的运气:) – LightBender