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个回答

2

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

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

定位啊 图片 marginleft:-(width/2) 至于img的宽度不固定 完全可以js获取 然后动态设置marginleft

1

再包一层。

<div id="wrapper">
    <div id="wrapper2">
        <img src="demo_img3.jpg" alt="" />
    </div>
</div>
#wrapper{
    position: relative;
    width: 200px;
    height: 200px;
}
#wrapper2{
    position: absolute;
    left: 50%;
}
img{
    margin-left: -50%;
}

wrapper2的宽度是img宽度。imgmargin-left就等于自身宽的一半,相当于left:-50%*width

0

外面包裹div,在img.onload时,js算出宽度赋给外层。让外层的内容居中

0

先给div一个 position:relative;
然后给img一个{

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}
如果不兼容c3,可以给img{

position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;

}

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

撰写答案