Конфликт с фиксированной маржой и 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>
Ответ 4
Вместо использования 6.8vw
используйте 6.8vmin
.
https://jsfiddle.net/zn4odjrc/2/
Ответ 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, является хорошим решением. вещь, тем не менее, вам нужно найти, чтобы исправить начальную точку текста и использовать тот же самый шрифт с правильным шрифтом и правильность шрифта. проверьте его, потому что они, похоже, не подходят.