css控制图片不改变原比例居中显示,图片超出div部分隐藏

<!DOCTYPE html>   
<html >
<head>
<mata charset ="UTF-8"></mata>
<style>
#images{
display:flex;
flex-direction:row;
}
#image{
width:200px;
height: 200px;
overflow:hidden;
display: flex;
  justify-content: center;
  align-items: center; 
}
img{
width:auto;

height:200px;
}
</style>
</head>
<body>
<div id = "images">
<div id = "image">

<img src ="images/third.jpg" >

</div>
<div id = "image">

<img src ="images/third.jpg" >

</div>
</div>
</body>
</html>

猜你喜欢

转载自zhangjingkun.iteye.com/blog/2386175
今日推荐