img на всю высоту блока

#html #css

Есть такая разметка, родительский элемент резиновый.
Вопрос: как растянуть картинку на всю высоту, сохранить пропорции, разместить строго
по центру и спрятать части, которые вылезут слева и справа.



.box {
  position: relative;
  width: 100%;		/* desired width */
  border: 2px solid #d6a86a;
}

.box:before {
  content: "";
  display: block;
  padding-top: 100%; 	/* initial ratio of 1:1*/
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 20px;
}

.content > div{
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.wrapper-news {
  float: left;
  position: relative;
}

img {
  width: 100%
}
  

    

      

        
      
 
    
  




Приложу картинку для наглядного понимания:



черный - блок;
красный - изображение;
желтый - видимая часть изображения;

    

Ответы

Ответ 1

Пример



.box {
  position: relative;
  width: 100%;		/* desired width */
  border: 2px solid #d6a86a;
}

.box:before {
  content: "";
  display: block;
  padding-top: 100%; 	/* initial ratio of 1:1*/
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 20px;
}
.wrapper-news {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.wrapper-news img {
  height: 100%;  
  position: relative; left: 50%;
  transform: translateX(-50%);
}