私のイメージの高さが幅に比例しないのはなぜですか？

Question

私はレスポンシブなウェブサイトを作ろうとしています。したがって、イメージの幅はスニペットに示されているようにページのwithで決まる幅になります。通常は、縦横比を維持するために、私は言う：小さい幅を作るとき height: relative

しかし、いくつかの理由で
は、高さが調整されません...それはなぜですか？

/* TITLE BLOCK */ 
 

 
.title_block { 
 
    width: 100%; 
 
    min-height: 320px; 
 
    height: auto; 
 
} 
 

 
.title-block-image { 
 
    width: 100%; 
 
    max-width: 345px; 
 
    height: relative; 
 
    display: block; 
 
    margin: auto; 
 
}

<div id="title_block" name="title_block" class="title_block white"> 
 
    <div class="float-left"> 
 
    <img src="{ROOT}img/Camerashop24/logo.jpg" alt="logo" style="height: 135px;" class="title-block-image"> 
 
    </div> 
 
</div>

Iは、メディアクエリ使用応答ウェブサイトのため

：

@media画面と（MAX-幅：1100px）{

}

通常の設定の画像は次のとおりです。

.title_block{ 
    width: 1100px; 
    height: 140px; 
    margin: auto; 
} 

.title-block-image{ 
    height: 100px; 
    width: auto; 
} 

100pxなどの設定を解除する必要がありますか？または、新しいheight: autoはすでにそうしているはずですか？

Answer 1

コメントにあるように、CSSではheight: relative;がありません。 height: auto;

Answer 2

他の人が言ったように、オートで高さを置き換える：あなたが配給を保存したい場合は、そのデフォルト値は自動あるか以前に、画像の高さを設定した場合、あなたはこの画像に設定することができますので、あなたは、高さを残すことができます画像の高さを正常にする。さらに、あなたのCSSをオーバーライドするので、あなたのhtmlの高さ属性を削除します。

/* TITLE BLOCrelative;K */ 
 

 
.title_block { 
 
    width: 100%; 
 
    min-height: 320px; 
 
    height: auto; 
 
} 
 

 
.title-block-image { 
 
    width: 100%; 
 
    max-width: 345px; 
 
    height: auto; 
 
    display: block; 
 
    margin: auto; 
 
}

<div id="title_block" name="title_block" class="title_block white"> 
 
    <div class="float-left"> 
 
    <img src="http://i.imgur.com/AoYz4Sw.jpg" alt="logo" class="title-block-image"> 
 
    </div> 
 
</div>

Answer 3

CSSにはheight: relativeはありません。しかし、autoがあります。

/* TITLE BLOCK */ 

.title_block { 
    width: 100%; 
    min-height: 320px; 
    height: auto; 
} 

.title-block-image { 
    width: 100%; 
    max-width: 345px; 
    height: auto; 
    max-height: 135px; 
    display: block; 
    margin: auto; 
} 

そしてHTML

<div id="title_block" name="title_block" class="title_block white"> 
    <div class="float-left"> 
    <img src="{ROOT}img/Camerashop24/logo.jpg" alt="logo" class="title-block-image"> 
    </div> 
</div>