html – Flexbox图像缩放到高度并保持纵横比

概述我有一个DIV,使用CSS flexbox缩放到可用的高度.在这个DIV中,我想在DIV中扩展两个维度.这意味着应该缩小其纵横比,并且小于相应DIV尺寸的尺寸应该居中. 我可以使图像跟随DIV的宽度,但不是高度.因此,肖像图像从DIV界限中逃脱. 这是一个jsFiddle来演示这个问题. html, body { height: 100%; margin: 0;}.container 我有一个div,使用CSS flexBox缩放到可用的高度.在这个div中,我想在div中扩展两个维度.这意味着应该缩小其纵横比,并且小于相应div尺寸的尺寸应该居中.

我可以使图像跟随div的宽度,但不是高度.因此,肖像图像从div界限中逃脱.

这是一个jsFiddle来演示这个问题.

HTML,body {  height: 100%;  margin: 0;}.container {  display: flex;  flex-direction: column;  height: 100%;}.Box {  flex: 1 1 auto;  display: flex;  justify-content: center;  align-items: center;}.Box img {  wIDth: auto;  height: auto;  max-wIDth: 90%;  max-height: 90%;}

<div >  <div ></div>  <div  >    <img src="//dummyimage.com/300" />  </div>  <div ></div></div>

解决方法 如果你可以从flex更改为block：

https://jsfiddle.net/svArtist/ug6eoxfs/

正如@janfoeh所指出的,使用对象拟合：包含使它成为可能：

body,HTML {    height: 100%;    margin: 0;    padding: 0;    overflow:hidden;    position:relative;}.container {    wIDth: 100%;    max-wIDth: 100%;    height: 100%;    max-height: 100%;}.Box {    background: yellow;    wIDth: 100%;    padding: 0 5%;    Box-sizing:border-Box;    max-wIDth: 100%;    height: 100%;    max-height:100%;    position:relative;}.Box img {    height:100%;    max-height: 100%;    wIDth: auto;    max-wIDth: 100%;    margin: auto;    position:absolute;    top:0%;    bottom:0%;    left:0%;    right:0%;    display:block;    object-fit: contain;}

如果需要Flex布局,作为最后的手段,您可以考虑使用背景图像,这使得整个事情变得非常简单：https://jsfiddle.net/svArtist/e1c2tLme/

background: url(http://placehold.it/300) no-repeat center center;    background-size: contain;

除此之外,我找不到不涉及脚本的方式.

总结

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

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