Заполнение DIV независимо от соотношения сторон

То, что я пытаюсь достичь, - заполнить div изображением как по ширине, так и по высоте. Я получаю контроль над шириной, но высота будет учитывать соотношение сторон без заполнения div по высоте. Пробовал размер фона: обложка и содержать в любой комбинации, но то, что я действительно могу покрыть без обрезки, - это просто ширина. Я не могу дать абсолютно размер в пикселях, потому что моя страница отзывчива.Заполнение DIV независимо от соотношения сторон

.slick-list { 
    background-image: url(http://lace.x10host.com/wp-content/uploads/2015/11/slicklist.png); 
    background-size: 100%, cover; 
    background-repeat: no-repeat; 
}

Что мне действительно нужно, чтобы сделать белую полосу (1440 х 76 пикселей) на изображении 1 охватывают весь slicklist в изображении 2. Можно ли с помощью CSS? Я злюсь, помоги мне, пожалуйста!

источник

2015-12-10 Razinar

Вы попробовали background-size: 100% 100%;, который растягивает изображение как по горизонтали, так и по вертикали в div?

Примечание:, используя этот метод искажает изображение, которое вы не могли бы хотеть, но если вы хотите белую коробку с размытой границей, вы можете сделать это только с помощью CSS, который держит углы хорошо, даже если размер.

Обновление: добавлен фрагмент кода для принятого решения ниже:

div#x { 
 
    background: #000; 
 
    padding: 10px; 
 
} 
 
div#shadow { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #fff; 
 
    border-radius: 5px; 
 
    box-shadow: 0px 0px 5px 5px #fff; 
 
}

<div id="x"> 
 
    <div id="shadow"></div> 
 
</div>

источник

2015-12-10 13:00:24 aorcsik

background-size: 100% 100%; не работает. Ширина в порядке, в то время как высота - это масштабная причина соотношения сторон. Я попробую решение css вместо использования изображения! – Razinar

Решено создать размытый фон непосредственно с помощью css. Спасибо! – Razinar

Если фон-размер: 100% 100%; не работает, возможно, ваш элемент div или container не такой большой, как вы думаете. Возможно, вы видите его полный размер, потому что вы видите переполнение, превышающее границы элемента.

См. this page ... background-size: 100% 100%; должен делать то, что вы хотите.

источник

2015-12-10 16:13:35 webguy

Заполнение DIV независимо от соотношения сторон

ответ

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