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

141

20 марта 2021, 10:10

Вопрос инициирован ответом в топике: Как я могу управлять применением 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; 
}

<section id="categories"> 
    <div class="row"> 
      <div id="column1" class="category"> 
        <h1>Column 1</h1>  
		 <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f511.svg" /> </div> 
      </div> 
      <div id="column2" class="category"> 
        <h1>Column 2</h1>  
		 <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f500.svg" /> </div> 
      </div> 
      <div id="column3" class="category"> 
        <h1>Column 3</h1> 
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f508.svg" /> </div> 
      </div> 
      <div id="column4" class="category"> 
        <h1>Column 4</h1>  
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f407.svg" /> </div> 
      </div> 
      <div id="column5" class="category"> 
        <h1>Column 5</h1> 
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f406.svg" /> </div> 
      </div> 
      <div id="column6" class="category"> 
        <h1>Column 6</h1>  
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f305.svg" /> </div> 
      </div> 
    </div> 
  </section>

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

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

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

Answer 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; 
}

<section id="categories"> 
    <div class="row"> 
      <div id="column1" class="category"> 
        <h1>Column 1</h1>  
		 <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f511.svg" /> </div> 
      </div> 
      <div id="column2" class="category"> 
        <h1>Column 2</h1>  
		 <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f500.svg" /> </div> 
      </div> 
      <div id="column3" class="category"> 
        <h1>Column 3</h1> 
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f508.svg" /> </div> 
      </div> 
      <div id="column4" class="category"> 
        <h1>Column 4</h1>  
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f407.svg" /> </div> 
      </div> 
      <div id="column5" class="category"> 
        <h1>Column 5</h1> 
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f406.svg" /> </div> 
      </div> 
      <div id="column6" class="category"> 
        <h1>Column 6</h1>  
		  <div> <img class="img1"  src="https://twemoji.maxcdn.com/svg/1f305.svg" /> </div> 
      </div> 
    </div> 
  </section>

Answer 2

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

.img {
  height: 300px;
}

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

--border-size: как поменять такой элемент(css переменную) из js?

так не работает

HTML

Фильтровать select

Есть два select элемента первый это марка авто, второе это модель авто

153

MySQL

Вставить данные с процедуры в таблицу в MySQL

Коллеги, кто-то проходил квест по написанию синтаксиса INSERT #Temp EXEC dboTest_Proc @a = @a в MySQL? Это вообще возможно без предварительного создания таблицы...

120

MySQL

Нужна помощь с SQL запросом на сортировку

Товарищи! ВыручайтеЗатуп какой то словил: Написать запрос, возвращающий на каждого пользователя (member_id) по три самых дорогих (order_amount) заказа...

113