<!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>
CSS controls the image to be displayed in the center without changing the original ratio, and the image is hidden beyond the div
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=326645094&siteId=291194637
Recommended
Ranking