导航箭头图像

Question

我试图在图像中心添加导航（左 - 右）箭头。 但不知何故，我没有固定大小的图像。它们可以是任何高度和宽度。

以下是我尝试http://jsfiddle.net/vh1fp0k0/

的内容

＆＃13;

＆＃13;

 #case-example-cover {
   width: 100%;
   height: 100%;
 }
 #nav-container {
   position: relative;
   border: 1px solid red;
 }
 #nav-container div {
   position: absolute;
   top: -webkit-calc(50% - 19px);
   top: -moz-calc(50% - 19px);
   top: -ms-calc(50% - 19px);
   top: calc(50% - 19px);
   width: 38px;
   height: 38px;
   background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
   border: 1px solid blue;
 }
 #case-left {
   left: 0;
 }
 #case-right {
   right: 0;
 }

＆＃13;

<div id="case-example-cover">
  <div id="nav-container">
    <div id="case-left"></div>
    <div id="case-right"></div>
    <img src="http://placehold.it/200x299" />
  </div>
</div>
<br>

<div id="case-example-cover">
  <div id="nav-container">
    <div id="case-left"></div>
    <div id="case-right"></div>
    <img src="http://placehold.it/400x400" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

期望的结果

如何做到这一点？

Answer 1

如果你制作#case-example-cover div inline-block，它会缩小图像尺寸。

JSfiddle Demo

＆＃13;

＆＃13;

 #case-example-cover {
   display: inline-block;
 }
 #nav-container {
   position: relative;
   border: 1px solid red;
 }
 #nav-container img {
   display: block;
 }
 #nav-container div {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 38px;
   height: 38px;
   background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
   border: 1px solid blue;
 }
 #case-left {
   left: 0;
 }
 #case-right {
   right: 0;
 }

＆＃13;

<div id="case-example-cover">
  <div id="nav-container">
    <div id="case-left"></div>
    <div id="case-right"></div>
    <img src="http://placehold.it/200x299" />
  </div>
</div>
<div id="case-example-cover">
  <div id="nav-container">
    <div id="case-left"></div>
    <div id="case-right"></div>
    <img src="http://placehold.it/400x400" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;