限制纵向图像上的图像宽度/保留长宽比

我在响应站点上设置了flexslider。我正在创建的滑块需要横向和纵向方向图像。我有smoothHeight: true设置，所以高度调整，以适应图像。限制纵向图像上的图像宽度/保留长宽比

在最大的媒体查询flexslider容器是750px宽。这对横向图像很好，但纵向图像变得太大。纵向图像的宽度设置为与容器大小相同 - 宽度为750px，因此高度至少为双倍，因此无需滚动即可查看整个图像。

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

有谁知道什么办法让flexslider保持纵横比，并调整图像的基础上，max-height的宽度是多少？因此，肖像图像将高达750px，但保持其纵横比。

2012-10-23 chalky

我`吨了解哪些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-02 19:49:14 iegik

图像应在默认情况下保持它的比例，除非你有一组width: 100%;过，在这种情况下，你应该改变这种使用width: auto,那么你max-height: 750px将采取先例

来源

2016-08-13 15:27:38 Frankie

这应该是一个评论 –

限制纵向图像上的图像宽度/保留长宽比

回答

相关问题