强制图像适合并保持宽高比
我希望图像填充其容器宽度的100％，并希望为其设置max-heigth属性，所有这些都保持长宽比，但允许丢失图像的任何部分。
img {
max-height:200px;
width:100%;
}
我知道background-size属性可以完成类似的操作，但是我想将其设置为内联<img>标签。
关于如何使用CSS实现此目标的任何想法？或JavaScript？
问题答案：
您可以尝试CSS3 object-fit ，并查看浏览器支持 表 。
CSS3 object-fit/ object- position指定对象（图像或视频）在其框内的放置方式的方法。对象适合选项包括“包含”（根据宽高比适合），“填充”（拉伸对象以填充）和“覆盖”（溢出框但保持比例），其中对象位置允许对象重新定位，如背景-图像呢。
**[JSFIDDLE DEMO](https://jsfiddle.net/k7h1xvr7/)**
.container {
width: 200px; /*any size*/
height: 200px; /*any size*/
}
.object-fit-cover {
width: 100%;
height: 100%;
object-fit: cover; /*magic*/
}
<div class="container">
<img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>
-
问题内容： 我正在处理图像，但遇到宽高比问题。 如您所见，并且已经指定。我为图像添加了CSS规则： 但是，我收到和。如何设置图像以调整尺寸，同时保持其纵横比。 img { 如果对于指定区域太大，则会缩小图像（不利的一面是，不会放大图像）。
-
我有一个保持宽高比的元素：它根据其宽度计算其高度（使用填充技巧）。我想做的是通过垂直和水平地拟合最大可用空间，将此放入另一个div中，不进行裁剪。我认为最接近我想要的东西是-这是而已。 我希望div覆盖最大的高度和宽度，同时保持纵横比。没有垂直或水平的作物。 它甚至可能与CSS只有？如果有，如何？ 更新：这是一篇很好的文章，介绍了目前的情况。 代码（可以是任何其他解决方案，不必在此代码段上构建）：
-
问题内容： 基本上，我想上传图像（已排序）并将其按比例缩小到某些限制，例如最大宽度和高度，但要保持原始图像的纵横比。 我没有在服务器上安装Imagick-否则这很容易。 一如既往地提供任何帮助。谢谢。 编辑：我不需要整个代码或任何东西，只是朝着正确的方向推进将是很棒的。 问题答案： 我为完成的另一个项目编写了这样的代码。我已在下面复制了它，可能需要修补一下！（它确实需要GD库） 这些是它需要的参数
-
我希望一个图像填充其容器宽度的100%，并且我希望它设置最大高度属性，所有这些都保持纵横比，但允许丢失图像的任何部分。 我知道可以用背景大小属性做类似的事情，但我想把它变成内联的 你知道我如何使用CSS实现这一点吗？还是javascript？
-
问题内容： 使用CSS flex box模型，如何强制图像保持其纵横比？ JS小提琴：http：//jsfiddle.net/xLc2Le0k/2/ 请注意，图像会拉伸或收缩以填充容器的宽度。很好，但是我们也可以拉伸或缩小 高度 以保持图像比例吗？ 的HTML 的CSS 问题答案： 对于img标签，如果您定义一侧，那么将调整另一侧的大小以保持纵横比，并且默认情况下，图像会扩展到其原始大小。 使用此
-
我有一个使用CSS flexbox缩放到可用高度的DIV。在这个DIV中，我想在两个维度上与DIV一起缩放图像。这意味着它应该被缩放以保持其长宽比，并且小于相应DIV维度的维度应该居中。 我可以使图像跟随DIV的宽度，但不能跟随高度。因此，肖像图像脱离DIV界限。 这里有一个jsFiddle来演示这个问题。