Question

我的图像响应宽度但高度固定。

在此图片中，我想显示一个文本，该文本必须始终相对于图像本身margin-right:0;。

这是我尝试过的。但是你可以看到，当你调整窗口大小时，我得不到我想要的东西。

CSS：

.wrapper {
  width: 100%;
  height: auto;
  background-color: red;
  text-align: center;
  position: relative;
}
.imgStyle {
  width: 50%;
  max-width: 200px; 
  height:120px;
}
.txt {
  z-index: 100;
  position: absolute;
  right:26%;
  top: 70px;
  width: 50px;
  height:30px;
  background-color: yellow;
}

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class = 'wrapper'>
     <img src ='http://www.w3schools.com/html/pic_mountain.jpg'
       class = 'imgStyle'
   >
    <p class = 'txt'>Hello</p>
  </div>
</body>
</html>

演示：

http://jsbin.com/segudozomu/edit?html,css,output

修改

在我遇到的实际问题中，我无法将图像本身设置为文本的背景图像。

Answer 1

将您的 html和css 设为：

.wrapper {
  left:10%;
  width: 100%;
  height: auto;
  background-color: red;
  text-align: center;
  position: relative;
}
.imgStyle {
  max-width: 200px; 
  height:120px;
  width:100%;
}
.txt {
  z-index: 100;
  position: absolute;
  right:0;
  top: 70px;
  width: 50px;
  height:30px;
  background-color: yellow;
}
.img-container{
  width:50%;
  display:table;
  margin:0 auto;
  position:relative;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class = 'wrapper'>
    <div class="img-container">
     <img src ='http://www.w3schools.com/html/pic_mountain.jpg'
       class = 'imgStyle'
   >
    <p class = 'txt'>Hello</p>
    </div>
  </div>
</body>
</html>

Answer 2

您可以尝试内联块和垂直对齐

＆＃13;

.wrapper {
  background-color: red;
  text-align: center;
  position: relative;
}
.imgStyle {
  max-width: 200px;
  height: 120px;
}
.txt,
.imgStyle {
  display: inline-block;
  vertical-align: bottom;/* update this value to your needs : top, middle, 2em, whatever you need */
  margin: 0;
}
.txt {
  /* optionnal
  position:absolute;
  bottom:0;
  */
  background-color: yellow;
}
.img-container {
  display: table;/* shrinks on content and can be centered */
  margin: 0 auto;
}

＆＃13;

<div class='wrapper'>
  <div class="img-container">
    <img src='http://www.w3schools.com/html/pic_mountain.jpg' class='imgStyle'><!-- comment to erase white-space from inline-block element --><p class='txt'>Hello</p>
  </div>
</div>

＆＃13;

Answer 3

使用额外的包装器，您可以将所有元素放在中心位置，并保持img和text的关系width / margin-right，如下所示：

.wrapper {
  left: 10%;
  width: 100%;
  height: auto;
  background-color: red;
  text-align: center;
  position: relative;
}
.wrapper > div {
  width: 50%;
  max-width: 200px;
  margin: 0 auto;
  position: relative;
}
.imgStyle {
  width: 100%;
  height: 120px;
}
.txt {
  z-index: 100;
  position: absolute;
  right: 0;
  top: 70px;
  width: 50px;
  height: 30px;
  background-color: yellow;
}

<div class='wrapper'>
  <div>
    <img src='http://www.w3schools.com/html/pic_mountain.jpg' class='imgStyle'>
    <p class='txt'>Hello</p>
  </div>
</div>

在响应式图像中显示文本并将边距保持为0

3 个答案: