css怎么使得图片大小自适应居中

Question

css怎么使得图片在img标签中自适应并且居中，img包含于一个div中，div有固定高度但是没有固定宽度

Answer 1

使用flex布局，在div盒子上设置

display:flex; 
justify-content:center;
align-items:center;

然后img继承父亲的长和宽就可以了.

参见:Flex布局

Answer 2

img {height:100%;}
div {text-align:center}

Answer 3

用 transform 实现

img {
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

Answer 4

div{
    display:block;
    float:none;
    width:100%:
    posisiton:relative;
}
div img{
    display:block;
    width:100%;
    height:auto;
    margin:auto;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}