0

Html 代码

<style>
    div {
        overflow: hidden ;
    }
    img {
        height: 100% ;
        width: auto ;
    }
</style>

<div>
    <img src='//foo.com/foo.jpg' />
</div>

想要的效果示例图

红色区域是 div, 绿色区域是 img

也就是说 img 比较宽

img的宽不固定, 所以不能用定死 margin-left 这种办法解决

查看全部 6 个回答

0

1

img{
    display: block;
    margin: 0 auto;
}

2

div{
    text-align: center;
    
    img{
         display: inline-block;
    }
}

3

div{
    position: relative;
    
    img{
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -(图片高度/2) 0 0 -(图片宽度/2)
    }
}

4 用flex

推荐答案

2

有一个办法,但不是用img标签,而是给div加background-image.

div {
    background-image: url(image-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}