html - 如何在图像上创建响应式 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，但我无法创建一个响应式的。

作为初学者，我正在尝试创建该网站的副本。我想创建第一部分，它应该是响应式的(计划和设计以及我们的目标应该在图像上)我怎样才能达到同样的效果？ check here

如何让它成为响应式的？

Answer 1

您提到的网站使用了背景图片，这是实现它的示例。

首先创建包装器 div，然后为其应用背景图像。使其相对定位。使其他子内容框 absolute 定位。所以你可以使用 top, left, right and bottom css acttributes 在其父级中自由移动它们

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) { 
}

我在网上找到的几篇有用的文章

List of media queries

What is RWD

如果你只是想知道如何使图像响应，这里有一篇关于 css 技巧的好文章

https://css-tricks.com/responsive-images-css/

您可以使用浏览器开发工具来学习网站源代码:)