Question

我正在尝试创建自己的灯箱，现在我被困在设计部分，我经理用我想要的水平响应图像创建幻灯片盒

<div class="gallery">
    <div class="container">
        <span class="centerer"></span>
        <div>
            <img src="http://images.car.bauercdn.com/pagefiles/18474/bmw_7-series_05.jpg">
        </div>
    </div>
    <a class="arrow left" href="#">
        <span class="centerer"></span>
        <img src="http://i.imgur.com/GbeQojB.png" />
    </a>
    <a class="arrow right" href="#">
        <span class="centerer"></span>
        <img src="http://i.imgur.com/GbeQojB.png" />
    </a>
</div>

_

a {
  text-decoration: none;
}

.gallery {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #333;
}

.container {
  width:80%;
  height:100%;
  position:absolute;
  left:10%;
  text-align: center;
}

.container div {
  display:inline-block;
  width:95%;
}

.centerer {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

img {
  vertical-align: middle;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
}

.arrow {
  width:10%;
  height:100%;
  display:block;
  position:fixed;
  text-align: center;
}

.arrow img {
  display:inline-block;
  opacity:0.5;
  width:50%;
}

.arrow:hover img {
  opacity:1;
}

.arrow.left {
  transform: rotate(180deg);
  left:0;
}

.arrow.right {
  right:0;
}

https://jsfiddle.net/4zpk43f2/

，但是当我将它用于垂直照片时，它......太糟糕了。我试图改变一些显示设置，但这对于垂直或者对于水平来说是好的。

https://jsfiddle.net/d470vkc9/1/

Answer 1

在您的代码中，通过将80%应用于width: 80%，您可以将图片的宽度限制为.container。你给了height: 100%同样的东西。这就是图像垂直伸展到完全的原因。提及高度80%也与.container一样。

试试这个：

.container {
    height: 80%;
    top: 10%;
    /* other styles */
}

.container > div {
    height: 100%;  /* or less as you prefer */
}

<强> Working Fiddle

绝对div中的图像垂直高度

1 个答案: