div中的中心图像，具有相同的比例和溢出隐藏，并始终填充

Question

简而言之，我希望将图像置于div中，保持比例，隐藏溢出，并使图像始终填充div。

这是我想要的一个例子：

〜

〜

有没有办法做到这一点？

Answer 1

听起来你可能想把图像作为背景放在div中作为容器，然后将文本或其他内容放在另一个div中？...也许这样？

    .container{
        background:url('image.png') no-repeat;
        width:500px;
        height:500px;
        overflow:hidden;
    }
    .content{
        width:20%;
        height:10%;
        margin: 0 auto;
    }

    <div class="container">
        <div class="content">
             text here text here text here text here 
        </div>
    </div>

Answer 2

我相信您可能正在寻找与background-size: cover;结合的background-position: center。

这意味着您的div将定义如下的CSS;

div {
  background: url('image.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width:100px;
  height:100px;
  overflow:hidden;
}

希望能帮到你！