Question

我有一个需要以另一个图像为中心的播放图像。我使用百分比来尝试让它在所有设备上运行，但百分比并不像他们应该的那样。我已经以纵向和横向拍摄了移动网站的屏幕截图，您可以在http://imgur.com/a/gN53f

找到它们

桌面网站有一个完全不同的行，隐藏在小型设备上，下面的代码只能在移动网站上看到。

这是css：

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}
.image2 {
  position: absolute;
  top: 30%;
  left: 43%;
  z-index: 2;
}

工作，有点。 HTML：

<div class="parent">
<img class="image1" src="https://placehold.it/1"/ alt="1">
<img class="image2" src="https://placehold.it/2"/ alt="2">
</div>

Answer 1

我将.image1类设为块元素，使图像居中并使用transform属性将image2放在中心

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  margin: 0 auto;
  display: block;
  z-index: 1;
}
.image2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
}

<div class="container">
  <div class="parent">
    <img class="image1" src="http://kingofwallpapers.com/image/image-025.jpg" alt="1" />
    <img class="image2" src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" alt="2" />
  </div>
</div>

Answer 2

您已将public class InitialPage { WebDriver driver; public InitialPage(WebDriver driver) { this.driver = driver; } WebElement element ; public WebElement yourOrders(WebDriver driver) { element = driver.findElement(By.id("nav-link-yourAccount")); return(element); } public WebElement signInBt(WebDriver driver) { element = driver.findElement(By.xpath(".//*[@id='nav-flyout-ya-signin']/a/span")); return(element); } }设置为相对，但这不会对.image1产生影响，因为它不是.image2的孩子。此外还不清楚图像的尺寸。

如果第二张图像应该始终与第一张图像一起向上和向下缩放，保持它的位置，可以这样做：

.image1

.parent { margin: 0 auto; max-width: 960px; /* i. e. never exceed 960px in width = max-width of .image1 */ position: relative; } .image1 { display: block; width: 100%; } .image2 { left: 25%; position: absolute; top: 25%; width: 50%; } .image2的高度/宽度与顶部，左侧和右侧的距离为25％。

Answer 3

更改图像尺寸以正确演示

将父div的宽度设为绝对位置为

.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 300px;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}
.image2 {
  position: absolute;
   top: 32%;
   left: 32%;
   z-index: 2;
   border: 1px solid;
}

<!DOCTYPE html>
<html>
	<head>
		
	</head>
  <body>
    <div class="parent">
      <img class="image1" src="https://placehold.it/300x300"/ alt="1">
      <img class="image2" src="https://placehold.it/100x100"/ alt="2">
    </div>
  </body>
</html>

Answer 4

我的第一张图片决定了父容器的大小，然后你应该像这样定位你的图像（对于我的代码，我使用固定大小的div。你可以显示你的图像：块）

.parent {
  position: relative;
  border: 2px solid gray;
}

.child-1 {
  height:300px;
  width: 300px;
  background: lightgreen;
  margin: 0 auto;
}

.child-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: salmon;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

Answer 5

关于响应能力，请使用“媒体查询”

设置图像2的宽度，例如，50％

现在设置为左：25％

如何将图像置于另一个图像中心并使其对移动环境做出响应？

5 个答案: