为什么子元素<img/>不包含父div的宽度和高度?

时间:2013-07-18 07:40:49

标签: css image html

每个人都尝试css样式如下:

.image{
        position: absolute;
        width: 100px;
        height:100px;
        padding: 5px;
        margin: 0;
        background-color:green;
    }
    <div class="image">
        <img src="http://www.wallpapersgo.com/wp-content/uploads/2010/02/Dodge-Charger-Car.jpg"/>
    </div>

问题是,显示图像的大小与原样相同,但不是100px * 100px的预期大小。 新鲜的CSS风格,需要帮助,thx!

2 个答案:

答案 0 :(得分:1)

使用:

.image{
        position: absolute;
        width: 100px;
        height:100px;
        padding: 5px;
        margin: 0;
        background-color:green;
    }

.image img {       
        width: inherit;
        height:inherit;
    }

答案 1 :(得分:0)

添加

.image img{
  height: 100%;
  width: 100%;
}

http://jsfiddle.net/p67dh/

这是因为您的图像不会自动使用父元素的大小。