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

Question

In short, I want to center image in div, Keep proportions, have overflow hidden, and have the image always fill the div.

Here is an example of what i want:

~

~

is there any way to do this?

Answer 1

Sounds like you may want to put the image as a background inside of a div as a container and then put the text or whatever inside another div?... maybe like this?

    .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

I believe you may possibly be looking for background-size: cover; in combination with background-position: center .

This means your div would have CSS defined like the following;

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

Hope that helps you out!