CSS с использованием единицы измерения em. Половина размера изображения в родительском элементе div

У меня есть изображение, используемое в качестве источника в HTML-теге img, в файле div. Используя блок размера em, я хотел бы изменить размер моего изображения как половину его родительского блока div. Поэтому я установил img для свойств CSS width и height со значением 0.5em. Но, как вы можете видеть в следующем коде, результат не такой, как ожидалось!

<div>
   <img src=''>
</div>

html {
   font-size:16px;    
}

div {
   width: 20em;
   height: 20em;
   border: 1px solid red;
}

img {
   border: 1px solid green;
   width: 0.5em;
   height: 0.5em;
}

Скрипт: http://jsfiddle.net/framj00/pz27X/1/
Может помогите мне, пожалуйста, решить эту проблему?
большое спасибо! :)


css cascading em
person JB-Franco    schedule 21.02.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

em используются для пропорциональных измерений. Если вы используете em, он будет основан на размере корневого шрифта, который равен html { font-size: 16px; }. Таким образом, width: 0.5em; height: 0.5em на самом деле будет 8px.

Если вы хотите, чтобы изображение составляло 50% от размера родительского <div>, вы не можете использовать em для измерения, вам нужно использовать %:

img {
  border: 1px solid green;
  width: 50%; /* width: 0.5em */
  height: 50%; /* height: 0.5em */
}
person Matt Smith    schedule 23.05.2014