html – 强制图像适合并保持纵横比

概述我想要一个图像来填充其容器宽度的100％,并且我希望它具有设置的max-heigth属性,所有这些都保持纵横比但允许丢失图像的任何部分. img { max-height:200px; width:100%;} 我知道使用background-size属性可以做类似的事情,但我想将其设为内联< img>标签. 我怎么能用CSS实现这个目标？还是javascript？ 您可以尝试使用C 我想要一个图像来填充其容器宽度的100％,并且我希望它具有设置的max-heigth属性,所有这些都保持纵横比但允许丢失图像的任何部分.

img {   max-height:200px;   wIDth:100%;}

我知道使用background-size属性可以做类似的事情,但我想将其设为内联< img>标签.

我怎么能用CSS实现这个目标？还是JavaScript？

解决方法 您可以尝试使用CSS3 object-fit,并查看浏览器支持 tables.

CSS3 object-fit/object-position Method of specifying how an object (image or vIDeo) should fit insIDe
its Box. object-fit options include “contain” (fit according to aspect
ratio),“fill” (stretches object to fill) and “cover” (overflows Box
but maintains ratio),where object-position allows the object to be
repositioned like background-image does.

JSFIDDLE DEMO

.container {  wIDth: 200px; /*any size*/  height: 200px; /*any size*/}.object-fit-cover {  wIDth: 100%;  height: 100%;  object-fit: cover; /*magic*/}

<div >  <img  src="https://i.stack.imgur.com/UJ3pb.jpg"></div>

相关信息：

> Exploring object-fit ★ Mozilla Hacks
> Polyfill for CSS object-fit property

总结

以上是内存溢出为你收集整理的html – 强制图像适合并保持纵横比全部内容，希望文章能够帮你解决html – 强制图像适合并保持纵横比所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。