Способность устанавливать ширину%, но не высоту

Question

Я новичок в css, и я попытался найти ответ, но я не смог его найти. Так что, пожалуйста, медведь со мной: D

У меня есть мета в моем коде (потому что это адаптивный мобильный интернет), я покажу его в случае его связанной с моей проблемой:

<meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 

Это часть моего кода, где я хочу, чтобы изменить imgwidth и height с CSS:

<div id="desc"> 
    <img alt="" src="images/MallDetail/MallDesc.png"> 
</div> 

Так что я пытался что-то вроде этого:

#desc img { 
    float: left; 
    width: 95%; 
    height: 50%; 
    margin: 0 2.5% 0 2.5%; 
} 

Тогда странно, что случилось: ширина работает отлично, imgwidth размер 95% от текущей ширины, но в height не работает - это просто не меняется (его height должно быть 50% от текущей высоты).

У меня также есть margin 0 и padding 0, чтобы сбросить мой css.

Почему это происходит? Что мне делать, чтобы заставить все работать?

Любая помощь приветствуется, спасибо за вашу помощь: D

Answer 1

Вы не можете установить высоту с помощью%. Высота увеличивается при увеличении ширины при использовании% для ширины.

вы должны использовать min-height: 90px; то высота увеличивается в зависимости от содержимого внутри.

например.

<div id="mainContainer"> 

     <img src="HelloWorld" alt="" style="width:100%" /> 
     <div class"newContent"> 
     <h1>Hello</h1> 
    </div> 

</div> 

CSS:

#mainContainer{ 
    min-height: 80px; 
    width:100%; 
} 

Answer 2

Если ширина работает правильно, то Img только нуждается в height:auto; И я хотел, чтобы мой ГИМ заполнить их родитель при создании сайтов жидкости, поэтому установить другой width и margin на desc. Это будет хорошо работать, если изображение квадратное, и вы хотите поддерживать соотношение высоты и ширины.

#desc { 
    float: left; 
    width: 95%; 
    margin: 0 2.5% 0 2.5%; 
} 
#desc img { 
    width:100%; 
    height:auto; 
    display:block; 
} 

Если это не цель, лучший способ регулировки высоты - использовать javascript. Я обычно применяю отношение к ширине, чтобы получить высоту.

JQuery

var descImg = $('#desc img') 
descImg.height(descImg.width() * 0.5 + 'px');