html - 在 DIV 中将更大的图像居中

Question

我正在尝试在较小的 div 中居中（和裁剪）一个大图像。这是我希望它的样子：

图像只是以 div 为中心；图像的大小无关紧要。

有任何想法吗？

Answer 1

您可以使用transform组合position:absolute来放置它

<div class="container">
    <img src="http://lorempixel.com/500/400/sports/1/" />
</div>

和

.container {
    width:200px;
    height:200px;
    position:relative;
}
.container img {
    /*position it starting at the center*/
    position:absolute;
    left:50%;
    top:50%;

    /*move it back by 50% of the image*/
    transform-origin: 50% 50%;
    transform:translate(-50%,-50%);
}

演示在http://jsfiddle.net/4nH3A/1/

---

如果您也想裁剪它，只需添加overflow:hidden到div。

演示在http://jsfiddle.net/4nH3A/2/

Answer 2

如果您能够使用 css background-image，这很简单：

.box1, .box2 {
    width: 100px;
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
}
.box1 {
    /* 300x300 image centered in div (cropped) */
    background-image: url(http://lorempixel.com/300/300);
}
.box2 {
    /* 50x50 image centered in div (not cropped) */
    background-image: url(http://lorempixel.com/50/50); 
}

http://jsfiddle.net/aWMLA/

Answer 3

尝试坚持标准的 CSS 布局。如果您尝试使用 overflow:visible 来“用完”元素，将会出现问题。

您应该尝试使用 HTML5 画布：drawImage()对于裁剪和调整大小都很有用。

Answer 4

background-image:center;

或者

text-align:center;

Answer 5

你可以这样使用：

<div id="myimg"></div>

css

#myimg{width: 200px; height: 200px; background: url() no-repeat center; background-size: cover;}