Проблема с текстом на фотографии и ее адаптивностью

Question

Я работаю над веб-проектом, в котором у меня есть изображение в центре экрана. Поверх этого изображения у меня есть текст в поле. Когда экран на всю ширину, он у меня "почти" такой большой, как я хочу. Однако, когда я уменьшаю экран, текст перемещается повсюду.

У меня есть следующий код:

.imageFit {
  padding-top: 5%;
  width: 100%;
  height: 100%;
}
.imageText span { 
  position: absolute; 
  top: 75%;
  left: 40%;
  padding: 10px;
  text-align:center;
  color: white;
  background: rgba(0,0,0,0.7);
  letter-spacing: -1px;
}

<div class="container">
  <img class="imageFit" src="https://hd.unsplash.com/photo-1420593248178-d88870618ca0">
  <div class="container">
    <h1 class="imageText "><span>Begins with one step</span></h1>
  </div>
</div>

Подсказка . Сообщите мне, если потребуется дополнительная информация.

html css responsive-design

0

ravenUSMC 8 Сен 2016 в 21:37

Answer 1

Если вы хотите сохранить все css, вы можете удалить теги <h1> и просто выполнить селектор :before с содержимым:

https://jsfiddle.net/ukdt27oz/1/

<div class="container">
    <img class="imageFit" src="https://hd.unsplash.com/photo-1420593248178-d88870618ca0">
</div>

 .imageFit {
   padding-top: 5%;
   width: 100%;
   height: 100%;
 }
 .container:before {
   content: "Begins with one step";
   color: black;
   position: absolute; 
   top: 50%;
   left: 35%;
   padding: 10px;
   text-align:center;
   color: white;
   background: rgba(0,0,0,0.7);
   letter-spacing: -1px;
   font-size: 5vw;
 }

1

Mr Lister 13 Сен 2016 в 17:26

Answer 2

Ну вот. Я удалил ненужные теги, а также сделал ваш текст отзывчивым.

.imageFit {
   padding-top: 5%;
   width: 100%;
   height: 100%;
 }

 .imageText { 
   position: absolute; 
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 10px;
   text-align:center;
   color: white;
   background: rgba(0,0,0,0.7);
   letter-spacing: -1px;
   font-size: 4vw;
  }
.container {
  position: relative;
  }

<div class="container">
  <img class="imageFit" src="https://pixabay.com/static/uploads/photo/2016/01/12/19/16/painting-1136443_960_720.jpg">
  <h1 class="imageText ">Begins with one step</h1>
</div>

2

Rudi Urbanek 8 Сен 2016 в 18:54

Answer 3

Всегда будет сложно заставить абсолютно позиционированные элементы перемещаться по DOM так, как вы ожидаете.

Позиционированные элементы absolute выводятся из естественного потока документов, они не имеют отношения к другим элементам, перемещающимся вокруг них.

Мы можем контролировать это до некоторой степени, объявив position: relative; для данного родительского элемента. Теперь это расположит его относительно этого родителя.

.imageFit {
   width: 100%;
   height: 100%;
 }

 .imageText span { 
   position: absolute; 
   left: 0;
    right: 0;
    max-width: 50%;
    width: 100%;
    display: block;
    margin: auto;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    max-height: 65px;
   padding: 10px;
   text-align:center;
   color: white;
   background: rgba(0,0,0,0.7);
   letter-spacing: -1px;
  }

.container-wrapper {
position: relative;
}

<div class="container-wrapper">
        <img class="imageFit" src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97500&w=800&h=500">
        <div class="container">
           <h1 class="imageText "><span>Begins with one step</span></h1>
        </div>
    </div>

1

UncaughtTypeError 8 Сен 2016 в 19:03

Проблема с текстом на фотографии и ее адаптивностью

3 ответа

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

Новые вопросы

html