限制纵向图像的图像宽度/保留纵横比
我在响应式站点上设置了flexSlider。我正在创建的滑块可以拍摄横向和纵向图像。我设置了slthHeight： true，以便调整高度以适应图像。
在最大的媒体查询中，flexslider容器的宽度为750px。这对于横向图像很好，但纵向图像太大了。肖像图像的宽度设置为与容器相同的大小-750px宽，因此高度至少是容器宽度的两倍，因此如果不滚动，则无法查看整个图像。
在css中，我尝试设置最大高度：750px，这解决了高度问题，但flexslider随后将图像拉伸到750px宽750px高。
有人知道有什么方法可以让flexslider保持纵横比，并根据最大高度调整图像的宽度吗？这样肖像图像将达到750px高，但保持其纵横比。
共有2个答案
默认情况下，图像应保持其比率，除非您的宽度为100% 也设置，在这种情况下，您应该将其更改为使用宽度：自动，然后您的最大高度为750px
我不明白你在说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/
相关问题：如何水平对齐裁剪元素？
-
使用CSS flex box模型，如何强制图像保持其纵横比？ JS小提琴：http://jsfiddle.net/xLc2Le0k/2/ 请注意，为了填充容器的宽度，图像会拉伸或收缩。这很好，但是我们也能让它拉伸或收缩高度来保持图像比例吗？ HTML CSS
-
我希望一个图像填充其容器宽度的100%，并且我希望它设置最大高度属性，所有这些都保持纵横比，但允许丢失图像的任何部分。 我知道可以用背景大小属性做类似的事情，但我想把它变成内联的 你知道我如何使用CSS实现这一点吗？还是javascript？
-
我有一个。的数据是从服务器请求的。 以下是中的项布局： 我从服务器请求数据，获取图像url并将图像加载到 适配器中有方法的代码 图像大小为。我在我的Nexus4上运行我的应用程序。图像填充宽度，但高度不缩放。不显示整个图像。 我如何解决这个问题？
-
所以我用下面的方法设置了摄像头- 如您所见，我在摄像机参数上使用了setRoation（）来实际指定图像方向，并在摄像机本身上使用了setDisplayOriation（）来处理表面预览中的方向更改。（注释和未注释的代码似乎都没有保留方向。当我检查数据时，它返回0） 之后，在回调中，我甚至尝试使用矩阵保存具有方向的图像。 实际问题 > 当我在肖像模式下拍照时，一切正常。它看起来像是被拿走了。 但是
-
编辑：我应该提到的是，我知道纵横比公式：原始高度/原始宽度x新宽度=新高度，但是，我不知道如何正确地使用它，以我的优势。
-
我有一个宽度为1900和高度为1000的图像，我使用的是和但我希望div高度与图像更改的高度相同。 示例： 在1366个屏幕中，图像将缩小尺寸以适应屏幕大小（宽度100%），因此，图像高度也将减小，因此我想获得该高度。 我试图做的是： HTML： CSS： 问题：vw是用滚动条宽度计算的，我想要没有，我可以使用宽度%而不是vw吗？ 我接受别人的想法来做这件事，但我更喜欢使用CSS。