Вопросы Теги

Как вымыть письмо последним и изменить текст? [Дубликат]

Я не думаю, что есть способ определить ширину, используя высоту (даже если мы можем сделать обратное, используя какой-то трюк, например padding), но идея состоит в том, чтобы полагаться на квадратное изображение, которое вы делаете невидимым для того, чтобы сохранить соотношение. Затем содержимое должно быть позиционировано: 

#blue {
  display: flex;
  align-items: center;
  justify-content:center;
  height:80vh;
  background: blue;
}

#yellow {
  height: 50%;
  background: yellow;
  position:relative;
}
img {
 max-height:100%;
 visibility:hidden;
}
#yellow .content {
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
}
<div id="blue" >
  <div id="yellow" >
    <img src="https://picsum.photos/500/500?image=1069" >
    <div class="content">Some content here</div>
  </div>
</div>

Но если высота синего фиксированного значения, лучше полагаться на CSS такая: 

#blue {
  display: flex;
  align-items: center;
  justify-content:center;
  --h:80vh;
  height:var(--h);
  background: blue;
}

#yellow {
  height: calc(var(--h) / 2);
  width:calc(var(--h) / 2);
  background: yellow;
  position:relative;
}
<div id="blue" >
  <div id="yellow" >
    <div class="content">Some content here</div>
  </div>
</div>

5
задан Félix Gagnon-Grenier 8 June 2016 в 02:57
поделиться

2 ответа

Вот фрагмент того, что вы ищете. 

p{
  color: Pink; 
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 4s steps(60, end); 
}

@keyframes type{ 
  from { width: 0; } 
} 
<p>Hi folks, this is typing animation using CSS</p>

15
ответ дан Sohrab Hejazi 1 September 2018 в 09:03
поделиться

Возможно, этот путь вам подойдет: фиксированная ширина для встроенного блока и анимации для уменьшения или увеличения его ширины 

div {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: example 2s linear 0s infinite alternate;
}

@keyframes example {
  from {
    width: 0;
  }
  to {
    width: 150px;
  }
}
<div>some text</div>

1
ответ дан mplungjan 1 September 2018 в 09:03
поделиться
Другие вопросы по тегам:

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