Относительная ширина и высота DIV

Я хочу иметь DIV, максимальная высота 90% или 90%. Я просто хочу поместить изображение в качестве фона в DIV, и полное svg-изображение должно быть видимым. Как на мобильном, так и на рабочем столе.Относительная ширина и высота DIV

CSS:

.camera { 
    position:absolute; 
    background-image: url(../img/svg-bild.svg); 
    background-repeat: no-repeat; 
    background-position: center; 
    max-height: 90%; 
    max-width: 90%; 
}

Спасибо за вашу помощь.

ps: Я использовал Google, но не могу найти что-то полезное. Я знаю, что где-то там будет, но у меня меньше времени на поиск 2 часа.

источник

2014-11-12 Patrick

Если вы хотите, чтобы фоновое изображение не будет вырезан и всегда помещается в контейнер, вы можете использовать background-size: contain;(more info on MDN).

Кроме того, необходимо изменить max-width/max-height к height/width иначе ваш элемент будет иметь 0 высота/ширина, поскольку она не содержит ничего:

.camera { 
    position:absolute; 
    background-image: url(../img/svg-bild.svg); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size:contain; /** add this **/ 
    height: 90%; /** change this **/ 
    width: 90%; /** change this **/ 
}

источник

2014-11-12 12:29:54

Этот один ворвался хорошо :) Спасибо человеку! Я не могу упрекать вас, потому что у меня есть низкий ранг ... Я сделаю это, когда смогу;) ¨ – Patrick

@Patrick рад, что я мог бы помочь. Если ваша проблема решена, не добавляйте «закрыто» в заголовок вашего вопроса, просто нажмите на галочку рядом с asnwser, которая вызвала вашу проблему. –

Не совсем заполняет требования вопроса. Нет гарантии, что изображение будет квадратным, поэтому контейнер не будет содержать размеры изображения - просто создаст квадратный блок. Тем не менее, без каких-либо измерений, это так же хорошо, как и будет. Возможно, если бы OP предоставила больше информации о том, что используется (jQuery, CSS и HTML точно), например PHP или что-то подобное, вы можете предварительно загрузить размеры, чтобы делать то, что было запрошено. – MrMarlow

Вы можете использовать background-size:cover или background-size:contain

.camera { 
background-size:cover;/*background-size:contain;*/ 
position:absolute; 
background-image: url(../img/svg-bild.svg); 
background-repeat: no-repeat; 
background-position: center; 
max-height: 90%; 
max-width: 90%; 
}

источник

2014-11-12 12:28:48 Akshay

Проблема заключается в том, что изображение не появляться и DIV имеет ширину и высоту 0x0px ... – Patrick

@Patrick меняет 'max-height' на' min-height' или просто 'height' и делает это для ширины также – Akshay

' background-size: cover' обрезает изображение. –

jsBin demo

.camera { 
    position: absolute; 
    background: url(../img/svg-bild.svg) 50%/cover; 
    height: 90%; 
    width: 90%; 
    /*margin:auto;top:0;right:0;bottom:0;left:0; /* UNCOMMENT TO CENTER */ 
}

источник

2014-11-12 12:29:08

Относительная ширина и высота DIV

ответ

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