Как сохранить размер и расположение по центру дочернего изображения при динамически изменяющейся ширине колонки родителя

#html #css #svg #css_animation

Вопрос инициирован ответом в  топике: Как я могу управлять применением z-index? Hover
отменяет z-index до завершения transitions   

В топике полностью решена проблема заданная OP. Всё работает и при добавлении текста
в  колонки, динамические изменяющиеся по ширине при наведении .    

Но с добавлением иконок svg возникли проблемы:   



body {
  padding: 0;
  margin: 0;
}

.category {
  float: left;
  width: 16.66%;
  text-align: center;
  transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
  z-index:0;
}
.category:hover {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}

#column1 {
  background-color: #147afaff;
  position: absolute;
  height: 100%;
}

#column2 {
  background-color: #fa9414ff;
  position: absolute;
  left: 16.66%;
  height: 100%;
}

#column3 {
  background-color: #2bae66ff;
  position: absolute;
  left: 33.32%;
  height: 100%;
}

#column4 {
  background-color: #fdd20eff;
  position: absolute;
  left: 49.98%;
  height: 100%;
}

#column5 {
  background-color: #603f83ff;
  position: absolute;
  left: 66.64%;
  height: 100%;
}

#column6 {
  background-color: #f93822ff;
  position: absolute;
  left: 83.30%;
  height: 100%;
}

#column1:hover {
  width: 100%;
  z-index: 1000;
}

#column2:hover {
  margin-left: -16.66%;
  width: 100%;
  z-index: 1000;
}

#column3:hover {
  margin-left: -33.32%;
  width: 100%;
  z-index: 1000;
}

#column4:hover {
  margin-left: -49.98%;
  width: 100%;
  z-index: 1000;
}

#column5:hover {
  margin-left: -66.64%;
  width: 100%;
  z-index: 1000;
}

#column6:hover {
  margin-left: -83.30%;
  width: 100%;
  z-index: 1000;
}

    

      

        
Column 1
 
		 
  
      
      

        
Column 2
 
		 
  
      
      

        
Column 3
		  
  
      
      

        
Column 4
 
		  
  
      
      

        
Column 5
		  
  
      
      

        
Column 6
 
		  
  
      
    
  




При изменении ширины колонок, SVG иконки тоже увеличиваются в размерах.

Как всё-таки добиться с помощью правил CSS сохранения начальных размеров иконок при
динамическом увеличении ширины родительских колонок?

Интересуют конкретные ответы, основанные на коде в вопросе, чтобы всё соответствовало.
    

Ответы

Ответ 1

Предлагаю вот так: 

.img1 {
  width: calc(100vw / 6);
}


6 - это количество колонок...



body {
  padding: 0;
  margin: 0;
}

.img1 {
  width: calc(100vw / 6);
}

.category {
  float: left;
  width: 16.66%;
  text-align: center;
  transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
  z-index:0;
}
.category:hover {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}

#column1 {
  background-color: #147afaff;
  position: absolute;
  height: 100%;
}

#column2 {
  background-color: #fa9414ff;
  position: absolute;
  left: 16.66%;
  height: 100%;
}

#column3 {
  background-color: #2bae66ff;
  position: absolute;
  left: 33.32%;
  height: 100%;
}

#column4 {
  background-color: #fdd20eff;
  position: absolute;
  left: 49.98%;
  height: 100%;
}

#column5 {
  background-color: #603f83ff;
  position: absolute;
  left: 66.64%;
  height: 100%;
}

#column6 {
  background-color: #f93822ff;
  position: absolute;
  left: 83.30%;
  height: 100%;
}

#column1:hover {
  width: 100%;
  z-index: 1000;
}

#column2:hover {
  margin-left: -16.66%;
  width: 100%;
  z-index: 1000;
}

#column3:hover {
  margin-left: -33.32%;
  width: 100%;
  z-index: 1000;
}

#column4:hover {
  margin-left: -49.98%;
  width: 100%;
  z-index: 1000;
}

#column5:hover {
  margin-left: -66.64%;
  width: 100%;
  z-index: 1000;
}

#column6:hover {
  margin-left: -83.30%;
  width: 100%;
  z-index: 1000;
}

    

      

        
Column 1
 
		 
  
      
      

        
Column 2
 
		 
  
      
      

        
Column 3
		  
  
      
      

        
Column 4
 
		  
  
      
      

        
Column 5
		  
  
      
      

        
Column 6
 
		  
  
      
    
  


Ответ 2

Добавьте это, к примеру:

.img {
  height: 300px;
}