Question

我正在开发一种完整的＃34;屏幕。我想在图像上显示箭头，以便能够转到上一个/下一个。

这是我的尝试：

html代码：

<div class="main">
  <div class="left">
    <a href="http://laurent.delrocq.free.fr/test/left.png" style="outline:0">
      <img src="http://laurent.delrocq.free.fr/test/left.png" alt="#">
    </a>
  </div>
  <div class="right">
    <a href="http://laurent.delrocq.free.fr/test/right.png">
      <img src="http://laurent.delrocq.free.fr/test/right.png" alt="#">
    </a>
  </div>
</div>

的CSS：

html, body {
  height: 100%;
  margin: 0;
}

a{
  outline:0;
}

.main{
    min-height: 100%;
    background-image:    url(http://laurent.delrocq.free.fr/test/img-1.jpg);
    background-size:     contain; 
    background-repeat:   no-repeat;
    background-position: center center;  
    }

.left{
    position:absolute;
    width:20%;
    height:100%;
}

.left a, .right a{
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

问题是如果浏览器窗口太大，箭头会移出图像

如何确保箭头停留在图像内并且图像的行为仍然像background-size: contain;？

Answer 1

添加

position: relative;
background-size: cover;

在.main

如果您不希望图像覆盖整页 - 请指定宽度 width: 70%;

demo

Answer 2

我制作了一个具有自动高度和自动宽度的父div，因此它适应图像大小。它也有display: inline-block，否则宽度为100％。

我将父母相对地置于其中我可以将一个子div定位为绝对，从父母那里选择高度和宽度。其余的很容易。

＆＃13;

.auto {
		width:auto;
		height:auto;
		position:relative;
		display:inline-block;
	}

	.absolute {
		position:absolute;
		top:0;
		left:0;
		height:100%;
		width:100%;
		z-index:2;
	}

	.left {
		position:absolute;
		top:50%;
		left:15px;
		transform: translateY(-50%);
	}

	.right {
		position:absolute;
		top:50%;
		right:15px;
		transform: translateY(-50%);
	}

＆＃13;

<div class="auto">
<img src="http://laurent.delrocq.free.fr/test/img-1.jpg" />
<div class="absolute">
	<img src="http://laurent.delrocq.free.fr/test/left.png" alt="#" class="left">
	<img src="http://laurent.delrocq.free.fr/test/right.png" alt="#" class="right">
</div>
</div>

＆＃13;

我希望它有所帮助。

保持div＆＃34;内部＆＃34;一个图像

2 个答案: