Question

我在<img>容器中有图片<div>。

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

图片尺寸可以不同，容器尺寸固定。我希望将图像完全放在容器中，无需拉伸和，而不使用此图像作为<div> 的css背景，因为大多数堆栈溢出答案都是如此。我已尝试过的Here is the js fiddle。

Answer 1

试试这个：

.container {
    margin: 20px;

    width: 100px;
    height: 120px;
    position:relative; 
    border: 1px solid red;  
}

.container img {
    max-width:100%;
    max-height:100%;
    position:absolute; 
    top:50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

这是jsfiddle

Answer 2

你可以这样做：

.container {
    margin: 20px;
    width: 100px;
    height: 120px;
    text-align:center;
    border: 1px solid red;    
}

.container img {
    width:auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

我已经使用您的代码为您working fiddle example了。

Answer 3

我同意imnancysun。但是，您应该添加供应商前缀以确保css可以与更多浏览器一起使用。我建议：

.container {
    margin: 20px;
    width: 100px;
    height: 120px;
    position:relative; 
    border: 1px solid red;  
}

.container img {
    max-width:100%;
    max-height:100%;
    position:absolute; 
    top:50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
        -ms-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
}

我大多数时候都使用firefox。没有前缀，所有图像都在div之外。

This是一个很酷的工具，可以帮助您在CSS中添加供应商前缀。

如何在div容器中拟合图像？

3 个答案: