CSS使兩個元素在同一高度，無論屏幕大小的

我有這兩個要素：CSS使兩個元素在同一高度，無論屏幕大小的

<div class="logo"><img src="images/logo.jpg" /></div> 
<div class="click-here"></div>

當我縮小我的屏幕，我將這些元素是相同的高度尺寸（點擊此處類有一個背景顏色），但是當我縮小我的屏幕，圖像變小，點擊高度保持不變，我做錯了什麼？

.logo { 
     height:97px; 
     width:24.4%; 
     float:left; 
} 

.logo img { 
     width:100%; 
} 

.click-here { 
     text-align:center; 
     font-family: 'MinionPro-Regular'; 
     font-weight:normal; 
     font-size:1.5em; 
     color:#FFF; 
     background-color:#CF1F2E; 
     height:97px; 
     float:right; 
     width:75%; 
}

來源

2014-11-05 user979331

如果在'％'中指定'width'，高度將會是'auto'並且將被重新計算以保持高寬比...也許你可以設置height：100％並且將width設置爲auto ... – 2014-11-05 20:29:25

你的div的高度是97px，但裏面的圖片沒有。相反，它有一個寬度，所以它會相應地調整高度以保持比例。

你可以簡單地指示圖像有一個max-height: 100%;

See here

.logo img { 
    width:100%; 
    max-height: 100%; 
}

但是爲了保持圖像的比例，去掉那麼寬的定義，並更改max-height到height: 100%;

See here

.logo img { 
    height: 100%; 
}

來源

2014-11-05 20:50:09 LcSalazar

你的div的高度都是97px，正如你指定的那樣。你的圖像只是高於其包裝div的寬度，因此其高度正適應div的寬度（以保留圖像寬高比）。

要麼適應圖像的width/height屬性（考慮到這些價值觀的人會/應該（？）來給定的原因計算）或隱藏div.logo的溢出。

來源

2014-11-05 20:33:49

CSS使兩個元素在同一高度，無論屏幕大小的

回答

相關問題