Как создать отзывчивый div на изображении?

Question

.container {
    border: 1px solid #DDDDDD;
    width: 200px;
    height: 200px;
    position:relative;
}
.tag {
    float: left;
    position: absolute;
    left: 0px;
    top: -10px;
    background-color: green;
}
.mytag {
    float: left;
    position: absolute;
    left: 60px;
    top: -10px;
    background-color: green;
}

<div class="container">
    <div class="tag">Featured</div>
     <div class="mytag">My list</div>
    <img src="http://www.placehold.it/200x200">
</div>

Я пытаюсь создать div на изображении, но я не могу создать отзывчивый.

Я пытаюсь создать копию этого сайта, поскольку я новичок. Я хочу создать первый раздел, который должен быть адаптивным (план и дизайн и наша цель должны быть на изображении) Как я могу достичь того же? проверьте здесь

Как сделать его отзывчивым?

Answer 1

Сайт, который вы упомянули, использует фоновое изображение, вот пример его достижения.

Сначала создайте свою оболочку div, а затем примените для нее фоновое изображение. сделать его относительно позиционированным. Сделайте остальные дочерние блоки контента absolute позиционированными. так что вы можете свободно перемещать их, используя top, left, right и bottom css-атрибуты внутри родительского элемента

HTML

<div class="div-with-bg-img">
  <div class="content-div">
   content here
  </div>
</div>

CSS

.div-with-bg-img {
  width: 350px;
  height: 150px;
  background: url(http://via.placeholder.com/350x150);
  margin-top: 100px;
  position: relative;
}

.content-div {
  width: 100px;
  height: 50px;
  background: tomato;
  position: absolute;
  top: -10px;
  left: 40px;
}

если вы хотите сделать его отзывчивым, примените относительные единицы измерения

.div-with-bg-img {
    width: 100%;
    height: 150px;
    background: url(http://via.placeholder.com/350x150) no-repeat;
    margin-top: 100px;
    position: relative;
    background-size: cover;
    background-position: center;
}

Используйте медиа-запросы, чтобы сделать ваш сайт отзывчивым

Вот пример кода

@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

Несколько полезных статей, которые я нашел в сети

Список медиазапросов

Что такое RWD

Если вы просто хотите узнать, как сделать изображение адаптивным, вот хорошая статья, опубликованная на css tricks

https://css -tricks.com / реагирующие-образы-CSS /

Вы можете использовать инструменты разработки браузера, чтобы узнать исходные коды сайта :)