Question

图片应该对所有设备都有响应。我用了

    <img src="images/enter/red20.png" class=" img-responsive" 
        style="max-width:15%;position: absolute; right: 30%;"/>
    <img src="images/enter/computer.png" class=" img-responsive" />

在第一个顶部图像上，但何时更改大小或浏览器顶部图像在其他位置移动。见上面链接中的设计。

Answer 1

关键是将百分比与最大宽度结合使用。

大图像，你给它一个最大宽度：100％，因此它永远不会像它自己的大小那样大，但也不会像它的父母一样大。

将图像包裹在父div中。这个div变成了一个显示：inline-block，所以我的宽度就像它的内容一样。你把这个div放在相对的位置。

然后我们在div中添加小图像并将其置于绝对位置。它的位置将相对于父（div）而不是身体。给它一个25％的最大宽度（例如）并以％表示它的顶部和左/右位置。

HTML：

<div class="wrapper">
  <img class="big-img" src="big.png" />
  <img class="small-img" src="big.png" />
</div>

CSS：

.wrapper{
  display: inline-block;
  position:relative;
}
.big-img{
  width: 100%;
  max-width: 100%;
  border: 1px solid blue;
}
.small-img{
  border: 1px solid red;
  position:absolute;
  right: 10%;
  top: 10%;
  width: 25%;
  max-width:25%;
}

DEMO

使结果窗口变小，您将看到图像调整大小。

Answer 2

试试这个

function moveObject(modObj: GameObject, initPos: Vector3, initRotation: Quaternion) {
  //Debug.Log("Moving Object");

  var hit: RaycastHit;
  var foundHit: boolean = false;

  foundHit = Physics.Raycast(transform.position, transform.forward, hit);
  //Debug.DrawRay(transform.position, transform.forward, Color.blue);

  if (foundHit && hit.transform.tag == "Terrain") {
    modifyObjGUIscript.activateMoveDisplay(initPos, hit.point);

    //      var meshHalfHeight = modObj.GetComponent.<MeshRenderer>().bounds.size.y /2; //helps account for large and small objects

    modObj.transform.position = hit.point; //***method 01***
    //      modObj.transform.position = Vector3.Lerp(initPos, hit.point, speed); //***method 02***
    //      modObj.transform.position = Vector3.SmoothDamp(initPos, hit.point, velocity, smoothTime); //***method 02***

    //      modObj.transform.position.y =  modObj.transform.position.y + meshHalfHeight + hoverHeight;

    modObj.transform.rotation = initRotation;
  }
}

css make wrapper <div class="wrapper"> <img class="big-img" src="http://i.stack.imgur.com/DATNq.png" /> <img class="small-img" src="http://i.stack.imgur.com/DATNq.png" /> </div>

position-relative;

Updated fiddle

Answer 3

您是否考虑过使用图像编辑软件来合并这两个图像？这解决了很多与定位有关的问题。然后，您可以缩放不同大小的图像，然后将其用于不同的页面布局，例如

＆＃34; imageName-原始＆＃34;
＆＃34; imageName-1/2×＆＃34;
＆＃34; imageName-2X＆＃34;
＆＃34; imageName-4X

Answer 4

如果可能，您可以将第一张图片放在相对div的背景中。第二个是div中的绝对图像。感谢

如何在另一个图像上设置图像？

4 个答案: