CSS:如何设置相对于父高度的图像大小?
Posted
技术标签:
【中文标题】CSS:如何设置相对于父高度的图像大小?【英文标题】:CSS: How can I set image size relative to parent height? 【发布时间】:2013-10-12 03:22:37 【问题描述】:我试图弄清楚如何重新调整图像的大小,以使其保持宽度与高度的比例,但会重新调整大小,直到图像的高度与包含的 div 的高度匹配。我有这些非常大和长的图像(屏幕截图),我想将它们放入 200 像素宽、180 像素高的 div 中进行显示,并且无需手动调整图像大小。为了使它看起来不错,图像的侧面需要溢出并被包含的 div 隐藏。这是我目前所拥有的:
http://jsfiddle.net/f9krj/2/
HTML
<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
<img src="http://www.skintype.ca/assets/background-x_large.jpg" />
</a>
CSS
a.image_container
background-color: #999;
width: 200px;
height: 180px;
display: inline-block;
overflow: hidden;
a.image_container img
width: 100%;
如您所见,图像父容器上显示灰色,根本不应该显示。为了使该容器完全装满,宽度需要在两侧均等地溢出。这可能吗?是否也可以解释太高的图像?
【问题讨论】:
您是否尝试过使用 CSS 背景图片并设置background-size: cover;
?
使用max-height:100%;
代替width
, fiddle
@CP510 你是对的。我应该发现这一点! jsfiddle.net/f9krj/4
Make an image width 100% of parent div, but not bigger than its own width的可能重复
【参考方案1】:
更改您的代码:
a.image_container img
width: 100%;
到这里:
a.image_container img
width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
height: 100%;
http://jsfiddle.net/f9krj/5/
【讨论】:
这是完美的解决方案。谢谢!它根据父元素设置图像的高度和宽度,而不是削减图像。再次感谢!【参考方案2】:原答案:
如果你准备好选择 CSS3,你可以使用 css3 translate 属性。根据更大的调整大小。如果您的高度大于容器宽度且宽度小于容器,则宽度将拉伸到 100%,高度将从两侧修剪。更大的宽度也是如此。
您的需要,HTML:
<div class="img-wrap">
<img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/200/300/nature/" />
</div>
和CSS:
.img-wrap
width: 200px;
height: 150px;
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
div > img
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
瞧!工作:http://jsfiddle.net/shekhardesigner/aYrhG/
说明
DIV 设置为relative
位置。这意味着所有子元素都将从该 DIV 开始的位置获取起始坐标(原点)。
图像被设置为 BLOCK 元素,min-width/height
都设置为 100% 表示无论图像大小如何,都将其大小调整为其父元素的 100% 的最小值。 min
是关键。如果按最小高度,图像高度超过了父级的高度,没问题。它将寻找最小宽度并尝试将最小高度设置为父母的 100%。两者反之亦然。这确保了 div 周围没有间隙,但图像总是有点大并被overflow:hidden;
修剪
现在image
,这被设置为absolute
位置与left:50%
和top:50%
。意味着将图像从顶部向左推 50%,以确保原点取自 DIV。左/上单位从父单位测量。
神奇时刻:
transform: translate(-50%, -50%);
现在,CSS3 transform
属性的 translate
函数移动/重新定位有问题的元素。此属性处理应用的元素,因此值 (x, y) 或 (-50%, -50%) 表示将图像负片向左移动图像大小的 50%,并将负片顶部移动图像大小的 50% .
例如。如果图像大小为 200px × 150px,transform:translate(-50%, -50%)
将计算为 translate(-100px, -75px)。当我们有不同大小的图像时,% 单位会有所帮助。
这只是找出图像的质心和父 DIV 并匹配它们的一种棘手方法。
抱歉,解释时间过长!
阅读更多资源:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate https://css-tricks.com/centering-css-complete-guide/【讨论】:
它有效,但我真的不明白。有人介意解释一下吗? 这是最好的 CSS 魔法。 既然还没有解释清楚:有人可以解释一下吗?随意编辑答案。 这会缩小图像,而不是调整大小。【参考方案3】:使用 CSS 的 max-width
属性,如下所示:
img
max-width:100%;
【讨论】:
【参考方案4】:如果您服用answer's Shekhar K. Sharma,并且它几乎可以工作,您还需要添加到您的这个height: 1px;
或这个width: 1px;
以确保工作正常。
【讨论】:
【参考方案5】:你可以使用弹性盒子来解决它..这将解决你的问题
.image-parent
height:33px;
display:flex;
【讨论】:
【参考方案6】:如果您要做的只是填充 div,这可能对其他人有帮助,如果纵横比不重要,那么它是响应式的。
.img-fill > img
min-height: 100%;
min-width: 100%;
【讨论】:
以上是关于CSS:如何设置相对于父高度的图像大小?的主要内容,如果未能解决你的问题,请参考以下文章