8

我在响应式站点上设置了 flexslider。我正在创建的滑块同时采用横向和纵向图像。我已经smoothHeight: true设置了高度以适应图像。

在最大的媒体查询中，flexslider 容器的宽度为 750 像素。这对于横向图像来说很好，但纵向图像变得太大了。纵向图像的宽度设置为与容器相同的大小 - 750px 宽，因此高度至少是其两倍，因此您无法在不滚动的情况下查看整个图像。

在 css 中，我尝试max-height: 750px了解决高度问题的设置，但 flexslider 然后拉伸图像以适应 750px 宽 x 750px 高。

有谁知道让 flexslider 保持纵横比并根据 调整图像宽度的任何方法max-height？这样肖像图像的高度为 750 像素，但保持其纵横比。

4

2 回答 2

2

我不明白您在谈论 Flexslider 的哪些功能 - 缩放图像或滚动工具栏中的缩略图？不管怎样，两种情况都有一个解决方案：

<style>
figure {
    outline: green solid 1px;
    padding: 2px;
}
img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;

    outline: red solid 1px;
    opacity: .5;
}
.scale img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    vertical-align: middle;
}
.toheight img{
    max-width: none;
}
</style>
<figure class="scale toheight" width="200" height="200">
    <img src="http://placekitten.com/250/300"/>
</figure>

容器内裁剪或缩放图像的解决方案http://jsfiddle.net/iegik/ZzXru/

相关问题：如何水平对齐裁剪的元素？

于 2012-11-02T19:49:14.370 回答
0

默认情况下，图像应保持其比例，除非您也width: 100%;有一套，在这种情况下，您应该更改它以使用，width: auto,然后您max-height: 750px将采取先例

于 2016-08-13T15:27:38.193 回答