Конфликт с фиксированной маржой и VW (ширина видового экрана)

У меня есть контейнер, который имеет 40px отступов. Внутри этого контейнера у меня есть изображение и текст.

Я пытаюсь синхронизировать изображение и текст. Если я изменил размер окна, мое изображение будет автоматически изменено, и я пытаюсь использовать единицы "vw", чтобы сохранить текст в синхронизации с изображением, но он не работает так, как я бы хотел. Отступы каким-то образом конфликтуют, но я не уверен, что будет правильным решением.

Вот мой простой пример:

.main {
  padding-left: 20px;
  padding-right: 20px;
  background-color: white;
  position: relative;
}

img {
  width: 100%;
}

.text {
  font-size: 6.8vw;
  position: absolute;
  left: 20%;
  top: 12%;
}
<body>
  <div class="main">

    <img src="http://screenshots.chriseelmaa.com/temp/d_slider_1_1_jpg__1918×880__1F40F570.png" />

    <span class="text">YOUR SHAPE.</span>
  </div>
</body>

Ответы

Ответ 1

Вы должны выразить размер шрифта не только шириной окна просмотра, но и дополнением. Поэтому правильный расчет будет примерно таким: font-size: calc((100vw - 40px) * 0.072);.

Объяснение: Желаемый размер шрифта зависит от ширины изображения, который может быть выражен как fontSize = imageWidth * factor. Ширина изображения определяется как 100% контейнера, но контейнер составляет 100% от области просмотра минус 40 пикселей

Ответ 2

Трудно синхронизировать пиксели с процентом (статическим с динамическим). каждая единица должна быть динамической.

.main {
  padding-left: 1vw;
  padding-right: 1vw;
  background-color: white;
  position: relative;
}

img {
  width: 100%;
}

.text {
  font-size: 7.3vw;
  position: absolute;
  left: 18.2%;
  top: 11%;
}
<body>
  <div class="main">

    <img src="http://screenshots.chriseelmaa.com/temp/d_slider_1_1_jpg__1918×880__1F40F570.png" />

    <span class="text">YOUR SHAPE.</span>
  </div>
</body>

Ответ 3

Вместо использования .text {/* css code */} используйте

<style type="text/css">
.text {
  left: 0;
  font-size: 6.8vw;
  position:absolute;
  text-align:center;
  top: 12%;
  width: 100%
}
</style>

Ответ 5

Вам не нужно создавать тень текста на изображении. Вы можете сделать это с помощью CSS. Отредактируйте свое изображение и удалите тень, затем примените этот CSS к вашему тексту:

см. это

https://codepen.io/prateek89760/pen/PKRKeQ

.main {
  padding-left: 1vw;
  padding-right: 1vw;
  background-color: white;
  position: relative;
}

img {
  width: 100%;
}

.text {
text-shadow: 6px 6px #ccc;
  font-size: 90px;
  position: absolute;
  left: 18.2%;
  top: 11%;
}


<img src="" />

<span class="text">YOUR SHAPE.</span>

Ответ 6

Редактированная версия работает почти отлично, но все значения являются относительными, за исключением padding. Вот почему позиции меняются на малых или больших разрешениях.

Измените дополнение на это:

.main  {
  padding-left: 3%;
  padding-right: 3%;
}

https://jsfiddle.net/zn4odjrc/8/

Ответ 7

Вот мой ответ, я не знаю, действительно ли это именно то, что вы хотите, но, возможно, может дать представление.
Я изменяю .main на позицию до абсолютного, чтобы ваш текст изменил размер базы на главном div

.main  {
  position: absolute;
  padding-left: 20px;
  padding-right: 20px;
  background-color: white;
}

img {
  display: block;
  width: 100%;
}

.text {
  display: block;
  font-size: calc((100vw - 40px) * 0.072);
  line-height: calc((100vw - 40px) * 0.082);
  margin-left: 18%;
  margin-top: -17%;
  
}
<body>
  <div class="main">

    <img
    src="http://screenshots.chriseelmaa.com/temp/d_slider_1_1_jpg__1918×880__1F40F570.png"/>

    <span class="text">YOUR SHAPE.</span>
  </div>
</body>

Ответ 8

Быстрое решение:   его все о начальной точке и правильном шрифте.

Объяснение:  после долгого пересмотра кода я могу сказать, что решение, данное @Abhishek Pandey, является хорошим решением. вещь, тем не менее, вам нужно найти, чтобы исправить начальную точку текста и использовать тот же самый шрифт с правильным шрифтом и правильность шрифта. проверьте его, потому что они, похоже, не подходят.