CSS: Авторазмер высоты

Есть ли способ автоматического изменения высоты изображения с помощью CSS?CSS: Авторазмер высоты

У меня есть меню в левой части сайта. Размер изображения 216 x 504.

Ширина в порядке, но высота изображения будет автоматически изменена в зависимости от разрешения экрана монитора.

Вот мой HTML:

<div class="menu-bg"> 
<img src="image/bg_menu.png" alt="" /> 
</div>

Вот мой CSS:

.menu-bg 
{ 
    position:absolute; 
    top:130px; 
    left:0px; 
    height: auto; 
}

height: auto; не работает. Я уже пробовал google, но результатом всегда является height:auto, который не работает. Я использую Mozilla Firefox в качестве браузера.

Любые комментарии оцениваются.

Спасибо

источник

2013-08-27 Princess Toledo

Вы хотите взять всю высоту обертывания div для своего iamge .. это было бы лучше, если бы вы могли сделать скрипку –

Итак, картинка должна быть картинка в фоновом режиме или какая-то кликабельная часть bg? Или почему вы используете img вместо атрибута background? Кстати, вы действительно хотите иметь изображение с мутированной высотой? Значит, он станет как 1200px высокий и все равно будет такой же ширины? :( –

@ Ms.Nobody ... uhm - это фон только для меню ... часть для заголовка, меню и нижнего колонтитула - это другой файл. Я просто вызываю его в php, используя include ... так что для меню, ширина будет по-прежнему одинаковой. Высота будет автоматически регулироваться в зависимости от разрешения экрана. –

.menu-bg img{ height:auto; } Используйте этот CSS и попробуйте

Что вы делаете, давая авто высоту контейнера не к изображению.

источник

2013-08-27 14:35:46

@Sharath ... Привет, спасибо за ваш ответ .. Я не знаю, как вы хотите. Я пробовал, но все еще не работал :( –

Вы можете использовать медиа-запросы для управления высотой изображения в соответствии с разрешением. Вы могли бы использовать свойство max-height.

источник

2013-08-27 14:37:21 Frisbetarian

@Frisbetarian ..hi не работающий тоже :( –

Попробуйте это:

.menu-bg { 
height:100%; /* remove this if it doesn't work at first */ 
position:absolute; 
top:130px; 
left:0px; 
} 

.menu-bg img { 
height:auto; 
}

источник

2013-08-27 14:51:07 NorthVodka

@NorthVodka ... hi, не работает :( –

попробовать этот Jquery

$(document).ready(function() { 
    var height = $(window).height(); 
    $('.menu-bg').css('height',height); 
});

источник

2013-08-27 17:44:30

Пробовали ли вы это:

.menu-bg{ 
    position:absolute; 
    top:130px; 
    left:0px; 
    height: auto; 
    border:2px solid red; 

    width:216px; 
    max-height:504px; 
    height:80%; 
} 
.menu-bg img{ 
    width:100%; 
    height:100%; 
}

"Высота: 80%" может быть скорректирована с вашими потребностями. ..;

источник

2016-10-03 07:50:33 Federico

Для элемента с position: absolute вы должны определить по крайней мере, ширину или высоту, в px или %, но процентное значение, только если родительский элемент имеет определение для этого параметра - авто ширина всегда будет 100%, но auto для высоты без установки высоты для родительского элемента не будет работать.

источник

2016-12-04 02:07:13 Johannes

CSS: Авторазмер высоты

ответ

Смежные вопросы