Estoy tratando de crear una imagen de fondo que responda a pantalla completa (como css background-size:cover) que contiene divs que mantienen la posición exacta en la imagen mientras se escala a través de un cambio de tamaño del navegador.
<div class="full_Screen_background"> <div class="image_to_fill_and_scale_fullscreen"> <div class="content_to_be_scaled_with_window_resizing"> </div> </div> </div>Y el CSS:
.content_to_be_scaled_with_window_resizing{ border:5px solid #000; position:absolute; top:30%; left:40%; height:10%; width:10%; } .image_to_fill_and_scale_fullscreen{ background: url(../4706825697_c0367e6dee_b.jpg); position: relative; background-size: cover; background-position: center; background-attachment: scroll; height: 100vh; background-repeat: no-repeat; }El resultado deseado es tener el div perfectamente escalado proporcionalmente con la imagen a medida que se cambia el tamaño del navegador.
¿Cualquier idea sería muy apreciada?
Lo probé con un lienzo. Espero que eso te funcione. Fijé el rectángulo a la cabeza del motorista.
window.onload = drawFullImage; window.onresize = drawFullImage; function drawFullImage() { var c = document.getElementById("myCanvas"); var imageDiv = c.parentNode; c.width = imageDiv.getBoundingClientRect().width; c.height = imageDiv.getBoundingClientRect().height; var ctx = c.getContext("2d"); ctx.clearRect(0, 0, c.width, c.height); var img = document.getElementById("imagetorender"); ctx.drawImage(img, 0, 0, c.width, c.height); ctx.strokeRect(c.width / 100 * 75, c.height / 100 * 30, c.width / 100 * 10, c.height / 100 * 10); } body { width: 100vw; position: relative; margin: 0; } #imagetorender { visibility: hidden; max-height: 100%; width: 100%; } #myCanvas { position: absolute; top: 0; left: 0; } <div id="wrapper"> <img id="imagetorender" src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" /> <canvas id="myCanvas"></canvas> </div>Editar: usé una imagen oculta para obtener la relación de aspecto correcta.