HTML

Question

我是html5和css的新手。

我正在尝试写一个小网页，我设置我的元素的宽度和高度遵循％。

但是当我这样设置时：

#tmainImg  img{
text-align: center;
padding-top:2%;
width: 50%;
height: 56%; }

当我试图改变“身高” - 减少或增加时，身高不起作用 - 什么都没发生。

但是当我改变宽度时，图像的高度和宽度都会发生变化......

但是当我设置高度跟随像素时，它就可以了。但我想要一个“响应式网页设计”所以我不想使用像素。这是我的css的一部分：

    img {
    border: 3px solid #fff; 
    border-radius: 0.3em 0.3em;
    max-width: 100%;
    max-height: 100%;
}

body {
    text-align: center;
    width: 100%;
    height: 100%;

}  #tmainImg  img{
text-align: center;
padding-top:2%;
width: 50%;
height: 56%; }

我的问题是：我如何设计高度和宽度遵循％完美工作？

我是新手，请帮帮我...

我的英语不好，谢谢你的阅读！：d

Answer 1

您仍然需要将一些css设置为div #tmainImg，然后您可以更改img的宽度和高度。

DEMO http://jsfiddle.net/yeyene/TA2c6/

尝试更改img宽度/高度并查看。

HTML

<div id="tmainImg">
    <img src="http://wallpaper-fullhd.com/wp-content/uploads/2013/03/at-the-beach-hd-wallpaper-1920x1200.jpg" >
</div>

CSS

#tmainImg{
    float:left;
    width:100%;
    height:100%;    
    background:#dfdfdf;
}
#tmainImg  img{
    float:left;
    text-align: center;
    padding-top:2%;
    width: 50%;
    height: 70%;
}

高度和宽度属性不完美

1 个答案:

HTML

CSS