你如何使div内的img响应达到最大高度？

-1

我使用普通的旧CSS没有bootstrap或任何东西。我想让一个img元素响应，从而缩小和扩大，同时保持其比例达到最大高度。我查看了几个SO响应，但没有找到与我的用例相匹配的东西。我将如何实现这一目标。我有这样的代码工作。你如何使div内的img响应达到最大高度？

<div class="imageContainer"> 
     <img src="{{employee._image}}"> 
    </div> 


img 
    :max-width 100% 
    :height auto 

.imageContainer 
    max-height: 300px

此方法适用于作为图像变得更小，当图像变大直至此时图像图像溢出的div最大高度它的工作原理。我希望它保持在该分区内，同时保持其比例。我已经尝试过在img和div上使用max-height的各种组合，但还没有得到它的工作。感谢您提供的任何帮助！

图像必须动态设置，所以硬编码的CSS与背景图像的url不是一个选项。

来源

2017-06-19 Dan

看看这里。 https://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent/14264093#14264093 – Daniel

谢谢，你的解决方案与继承关键字的伎俩，现在我有中心的问题形象，但这是另一个问题。 – Dan

我在列表中添加了答案，但是如果您可以在没有的情况下关闭帖子，请继续。只要搭便车就行了。我也认为你的中心问题是通过'text-align'属性完成的，如图所示。 – Daniel

尝试设置csstop和bottom属性0px。

img 
    :max-width 100% 
    :height auto 
    :top 0px 
    :bottom 0px

来源

2017-06-19 18:20:41

要将图像设置为div的最大高度，成像仪的height属性必须从其父项继承。周围的答案和理论可以在这里找到：Child with max-height: 100% overflows parent

.container { 
    background: blue; 
    padding: 10px; 
    max-height: 100px; 
    max-width: 100px; 
    text-align:center; 
} 

img { 
    max-height: inherit; 
    max-width: inherit; 
}

来源

2017-06-19 18:46:38 Daniel

我相信我能实现你的目标是这样的：

img { 
    max-width: 100%; 
    max-height: inherit; 
}

来源

2017-06-19 20:11:53 dlaub3

你如何使div内的img响应达到最大高度？

回答

相关问题