CSS Позиционирование SVG внизу div - PullRequest
Новая
       11

CSS Позиционирование SVG внизу div

0 голосов
/ 11 марта 2020

У меня есть div, который должен содержать lo go и иллюстрацию. Мобильная версия должна занимать 100% экрана, а раздел изображения должен занимать 60% экрана. Я застрял в этом, как вы можете видеть на изображении ниже. Я надеюсь, что кто-то с лучшими CSS навыками поможет мне с этим.

Код: 

.image-content {
      height: 500px;
      background-color: #e8f6fa;
      border: 1px solid red;
      .logo {
        visibility: hidden;
        position: absolute;
        margin: 30px auto;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 2;
      }

      .cover-image {
        border: 1px solid blue;
        position: absolute;
      }
    }

Код JSX: 

 <div className='image-content'>
              <Image className='logo' src={logo} />
              <Image className='cover-image' src={coverImages[pageIndex]} />
            </div>

Он написан с использованием React и Semanti c UI.

Rendered HTML: 

   <div class="image-content">
    <img
      src="/static/media/intro-logo.862f85da.svg"
      class="ui image logo"
    /><img
      src="/static/media/welcome-clean-crop.a0857347.svg"
      class="ui image cover-image"
    />
  </div>

Граница установлена ​​только для понимания.

Спасибо!

Ответы [ 2 ]

1 голос
/ 11 марта 2020

Вы можете использовать это в своем .image-content: 

display: flex;
align-items: flex-end

JSFiddle

Использование flexbox для выравнивания элементов до конца, ALIGN-элементы .

0 голосов
/ 11 марта 2020

Дайте ширину вашего обложки img: 100% для мобильного чехла.

Добавлено css, предназначенное только для мобильных чехлов: 

@media (max-width:767px){
      .cover-image{
      width:100%}
      }

Демонстрационный пример: 

* {
  box-sizing: boder-box;
}

.image-content {
  height: 500px;
  background-color: #e8f6fa;
  border: 1px solid red;
}

.logo {
  visibility: hidden;
  position: absolute;
  margin: 30px auto;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
}

.cover-image {
  border: 1px solid blue;
  position: absolute;

}

@media (max-width:767px) {
  .cover-image {
    width: 100%
  }
}
<div class="image-content">
  
    <img src="https://dummyimage.com/80x80/000/f0f0f0.jpg&text=logo" class="ui image logo" />
  
  
    <img src="https://dummyimage.com/350x500/red/000.jpg&text=banner" class="ui image cover-image" />
 
</div>
...