Как сохранить изображение в центре, если родитель меньше?

Question

Я в настоящее время пытаюсь ответить дизайн. Мне нужно сохранить изображение в центре, в то время как родительский div становится меньше.

Смотрите изображение объяснения:

Я не хочу, чтобы использовать его в качестве фона. Следующий код всегда будет поместить его в верхнем левом углу сНу коробки

<div id="img_wrap"> 
    <img src="test.png" id="img" /> 
</div> 

<style type="text/css"> 
    #img_wrap { 
     overflow: hidden; 
     text-align: center; 
    } 
</style> 

Answer 1

Вот example

#img_wrap{ 
    position: relative; 
    overflow: hidden; 

    /* arbitrary container size */ 
    width: 7rem; 
    height: 16rem; 
} 

#img{ 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 

Хитрость заключается в том, что изображение абсолютно помещалась в центре, 50% его ширину родительского контейнера, а затем сдвинутую налево 50% от собственной ширины с преобразованием.

Answer 2

Вот решение, чтобы сделать изображение реагировать ..

<div id="img_wrap"> 
    <img src="test.png" id="img" /> 
</div> 

<style type="text/css"> 


     #img_wrap{ 
     position:relative 
     } 
    #img_wrap img{ 
     max-width:100%; 
     height:auto; 
     margin:0 auto; 
     display:block; 


    } 
</style> 

Надеется, что это помогает ...

Answer 3

Если совместимость Старого браузера не проблема, вы можете использовать следующие

#img_wrap img 
{ 
    display:flex; 
    -ms-flex-pack:stretch; 
    -webkit-box-pack:stretch; 
    justify-content:center; 
} 

Answer 4

Для создания центра изображения

<div id="img_wrap"> 
    <img src="http://placehold.it/350x150" id="img" /> 
</div> 


<style type="text/css"> 
     #img_wrap{ 
     position: relative; 
     width: 200px; 
     height:150px;/*give the image height*/ 
     background: red; 
     overflow:hidden; 
     display: inline-block; 
    } 

    #img{ 
     position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    } 
    </style> 

Демоверсия http://jsfiddle.net/adarshkr/p1p100h7/1/