Margin-Top <0 приводит к неправильному масштабированию

Я хочу, чтобы дочерний элемент можно было масштабировать и центрировать. Если вы измените масштаб дочернего элемента на 200%, вы увидите, что верх элемента фиолетовый, но вы не можете увеличить масштаб. Как я могу это исправить? Я думаю, это потому, что верхняя маржа ниже нуля.

Масштаб 100%:

#child {
  background-image: linear-gradient(red, violet, yellow, green, pink);
  width:50px;
  height:400px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    zoom: 100%;
}

#parent {
  background-color:blue;
  width:500px;
  height:500px;
  position: relative;
  transform: scale();
  overflow: auto;
}

<div id = "parent">
  <div id = "child"></div>
</div>

Масштаб 200%:

#child {
  background-image: linear-gradient(red, violet, yellow, green, pink);
  width:50px;
  height:400px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    zoom: 200%;
}

#parent {
  background-color:blue;
  width:500px;
  height:500px;
  position: relative;
  transform: scale();
  overflow: auto;
}

<div id = "parent">
  <div id = "child"></div>
</div>

html css overflow zooming margin

10.01.2019 13:03

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Поскольку высота #child выражена в пикселях, функция масштабирования увеличивает количество пикселей. Если вы используете height: ..%, процент высоты будет масштабироваться на вашем zoom.

Тогда высота останется на ..%, масштаб не будет увеличиваться.

— 10.01.2019 14:36

10.01.2019 13:42

Ответ принят как подходящий

Решил это, добавив 'display: flex; align-items: center;' к родительскому и удалив абсолютную позицию (включая позиции)

#child {
  background-image: linear-gradient(red, violet, yellow, green, pink);
  width: 50px;
  height: 400px;
  margin: auto;
  zoom: 200%;
}

#parent {
  background-color:blue;
  width: 500px;
  height: 500px;
  overflow: auto;
  display: flex;
  align-items: center;
}

<div id = "parent">
  <div id = "child"></div>
</div>

29.05.2019 11:08

Другие вопросы по теме

Несколько идентификаторов при вводе в CSS

Ширина гибкого элемента не изменяется в IE

Встроенный дисплей - переполнение видимой непрозрачности

Angular - свойства CSS добавленного класса не отображаются

Компонент Bootstrap 4 с таким же заполнением, как у карты, и без настраиваемого css

Bulma и Fontawesome: как выровнять значки по вертикали и горизонтали?

Уместно ли английское именование CSS и нужно ли его изменить?

Css не отображать текст между элементами html

Какое регулярное выражение лучше всего подходит для значений CSS?

Заставить высоту каждой ячейки сетки CSS зависеть от самой большой ячейки его строки

Margin-Top <0 приводит к неправильному масштабированию

Ответы 2

Другие вопросы по теме

Похожие вопросы