Как подобрать div на отзывчивом фоне

Недавно я искал способ сделать это:Как подобрать div на отзывчивом фоне

У меня есть html, который содержит фоновое изображение. Это изображение чувствительно/масштабируется при изменении размера благодаря правилу background-size: cover;. Но в этом Html (с position: relative правила) у меня есть некоторый DIV, которые должны иметь ширину, высоту и положение, чтобы покрыть один из ноутбуков (в моем изображении верхнего рисунка)

Проблема заключается в том, что даже если я использовать проценты или фольксваген или vh, после изменения размера этот элемент никогда не будет соответствовать одному на ноутбуках (на экране 2 и 3 изображения).

Так что мой вопрос - это возможно? Если да, я могу использовать каждую технику (javascript, css3) для архивирования этого эффекта. Кроме того, div также должен изменять размеры, соответствующие одному из ноутбуков.

Благодарим за консультацию.

Размер фона 100% 100% может скворовать изображение.

источник

2016-11-08 user3573535

Вы пытаетесь достичь макета сетки? – Raymond

Не в восторге. Ноутбуки - это фоновые изображения, а не элементы html. Но div должен располагаться «на этой сетке, скажем так ...» – user3573535

Тогда почему бы вам просто не дать этому div фоновое изображение? .. – Raymond

Вы можете попробовать использовать % для background-size собственности

Пример:

div{ 
    background-size:100% 100%; 
    background-repeat: no-repeat; 
}

Вы также можете попробовать background-attachment недвижимость

Вот подробности о CSS3 background-size недвижимости

источник

2016-11-08 09:21:17

Хорошая точка! Но тогда фоновое изображение может быть сжато. – user3573535

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

Вы должны «обрезать» изображение для идеального просмотра/эскиза. Но я предлагаю использовать тэг img для отображения изображения. Не используйте 'background-image' @ user3573535 –

Вы можете попробовать свои галереи вроде как это (без использования фонового изображения)

ul{ 
 
\t list-style: none; 
 
} 
 
ul li{ 
 
\t display: inline-block; 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t overflow: hidden; 
 
\t position: relative; 
 
} 
 
ul li img{ 
 
\t position: absolute; 
 
\t -webkit-transition: all .5s ease; 
 
\t -moz-transition: all .5s ease; 
 
\t -ms-transition: all .5s ease; 
 
\t transition: all .5s ease; 
 
} 
 
ul li img:hover{ 
 
\t transform: scale(1.5,1.5); 
 
}

<ul> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
\t <li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li> 
 
</ul>

источник

2016-11-08 16:02:01

Как подобрать div на отзывчивом фоне

ответ

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