JSFiddle - React, Tailwind, and code Playground
HTML
<div class="imagenHome">
<div class="texto1Home" style="font-size: 280%;">SOMOS UNA CONSULTORÍA ESPECIALIZADA<br>
EN PROPIEDAD INDUSTRIAL E INTELECTUAL,<br>
INGENIERÍA DE PRODUCTO Y DISEÑO.</div>
<div class="texto2HomeVideo">Si tienes un minuto, te explicamos lo que<br>
podemos hacer por ti. Por favor dale al play.</div>
</div>
CSS
body, html{
14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.imagenHome{
background-image: url(http://www.verdelimon.es/work/pruebas-contenido-alineado/1-home.jpg);
background-repeat: no-repeat;
width: 100%;
height: 835px;
background-size: contain;
}
.texto1Home{
width: 48.1%;
color: #58585A;
font-weight: 700;
line-height: 100%;
text-align: center;
float: left;
border: solid 1px red;
position: absolute;
display: inline-block;
top: 13.75%;
left: 25.75%
}
.texto2HomeVideo{
width: 48.05%;
height: 8.25%;
color: #FFF;
font-weight: 100;
text-align: center;
float: left;
border: solid 1px red;
position: absolute;
display: inline-block;
top: 35%;
left: 25.65%;
font-style: italic;
}
JavaScript
jQuery(document).ready(function(){
jQuery(".texto1Home").calcularFontSize(923, 250);
jQuery(".texto2HomeVideo").calcularFontSize(923, 250);
jQuery(window).resize(function(){
jQuery(".texto1Home").calcularFontSize(923, 250);
jQuery(".texto2HomeVideo").calcularFontSize(923, 250);
});
});
/*
* Function para redimencionar el texto
* necesita 2 parametros, el ancho maximo del div a resolucion 1920
* y el tamanyo maximo de la fuente en %
*/
(function($){
$.fn.calcularFontSize = function(maxWidth, fontSizeMaximo){
var nuevoAncho = $(this).width();
var newFontSize = (nuevoAncho * fontSizeMaximo) / maxWidth;
$(this).css("font-size", newFontSize+"%");
}
})(jQuery);