0

私はhtml5とcssが初めてです。

私は小さな Web を書き込もうとしていますが、要素の幅と高さを次の % に設定しています。

しかし、私がこのように設定すると：

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

「高さ」を変更しようとすると、高さが機能しません-減少または増加-何も起こりません。

しかし、幅を変更すると、画像の高さと幅の両方が変更されます...

しかし、高さフォローピクセルを設定すると、うまくいきます。しかし、「レスポンシブ Web デザイン」が必要なので、ピクセルを使用したくありません。これは私の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

4

1 に答える 1

1

css を div に設定する必要があり#tmainImgます。その後、 の幅と高さを変更できますimg。

デモ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%;
}
于 2013-06-21T02:40:14.650 に答える