Html 在div内缩放图像失败

我在HTML中获得了以下结构：

<div id="a">
    <div id="b">
        <div id="c">
            <img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg"/>
        </div>
    </div>
</div>

我希望将图像缩放到红色容器中。这个结构就是这样固定的。我还为你上传了小提琴：

---

我希望有人能帮忙

使用图像上的

位置：绝对
进行缩放


#a
具有
位置：相对
，并且
位置：绝对
图像将相应缩放

以顶部、右侧、底部、左侧和
margin:auto的组合为中心

框大小：边框框
将填充和任何边框合并到宽度中，有助于防止出现讨厌的滚动条


例子

*{
框大小：边框框；
}
#a{
高度：300px；
背景色：红色；
填充：20px；
宽度：100%；
文本对齐：居中；
职位：相对
}
#b{
宽度：自动；
高度：自动；
显示：内联块；
最大高度：100%；
/*应为300px-2*20px=260px*/
/*此处不得设置高度*/
}
#c{
背景颜色：绿色；
最大宽度：300px；
最大高度：继承；
}
img{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
保证金：自动；
不透明度：0.8；
身高：90%；
高度：计算（100%-40px）；
}

尝试的最大高度：100%；在img上？@j08691:是的，我已经试过了，但对我来说不管用。@FahadHasan:对我来说管用@tellob您想让图像覆盖整个红色区域吗？这里的最终结果是什么？要在红色容器中缩放图像？最大宽度：180%为图像带来了什么？a的填充丢失了！如何取回？编辑。Is
高度：计算（100%-40px）好吗？图像是垂直居中的，所以我们去掉了40px，上面和下面有20px的间隙。另外，计算高度上方是
高度：90%
。如果浏览器不支持
calc（）
，则将使用90%的高度。请记住，图像将不再影响
#b
或
#c
的高度。他们需要有某种高度<代码>高度：100%
可以。这完全取决于你想要实现的目标：）
#a{
    height: 300px;
    background-color: red;
    padding: 20px;
    width: 100%;
    text-align:center;
}

#b {
    width: auto;
    height: auto;
    display: inline-block;
    max-height:100%; /*should be 300px - 2*20px = 260px */
    /*no height shall be set here*/
}

#c {
    background-color:green;
    max-width: 300px;
    max-height: inherit;
}

img {
    opacity: 0.8;
    max-width: 100%;
}