Question

我试图找出如何根据其中.gallery元素的大小定义此img元素的高度。

<div class="row">
        <div class="large-10 columns">
            <div class="gallery portrait">
                <div class="cover">
                    <img src="http://placekitten.com/800/1029">
                </div>
                <ul class="thumbs">
                    <li class="thumb"></li>
                    <li class="thumb"></li>
                    <li class="thumb"></li>
                </ul>
            </div>
        </div>
    </div>

我在CSS中使用基于百分比的高度和宽度来设置图库中元素的高度和宽度。但是，我定义了.gallery元素的高度（以像素为单位），因此我的百分比元素可以正常工作。

.gallery {
  height: 680px;
}

我试图调整.gallery的高度，以便在调整浏览器窗口大小并调整图像时调整其自身。

我已经对我遇到的问题进行了演示：http://codepen.io/realph/pen/kKAmx

感谢任何帮助。提前谢谢！

Answer 1

如果我正确理解了您的问题，那么只需删除图库中的height:条目并覆盖课程。 gallery元素应扩展合约以适合图像（只要图像具有％宽度）。

<强> Example Fiddle

CSS：

.gallery {
 background: orange;
 width: 100%;
 float: left;
 //height: 680px;
}

.cover {
  float: right;
  width: 63.8554217%; 
  //height: 680px;
  overflow: hidden;
}

.gallery img {
  width: 50%;
}

根据图像内部调整元素高度

1 个答案: