css3 - toda - imagen de fondo responsive bootstrap

¿Cuál es la matemática detrás del tamaño de fondo de CSS?

Question

Estoy creando un "generador de imágenes" donde los usuarios pueden cargar una imagen y agregar texto y / o dibujar en ella. La imagen de salida es un tamaño fijo (698x450).

En el lado del cliente, cuando el usuario carga su imagen, se configura como el fondo de un div que es 698x450 con una cubierta de tamaño de fondo. Esto hace que se llene el área muy bien.

La imagen combinada final es generada por PHP usando funciones GD. Mi pregunta es, ¿cómo puedo hacer que la imagen se amplíe en PHP de la misma manera que lo hace en CSS? Quiero que el resultado de la secuencia de comandos PHP se vea igual que si la imagen estuviera configurada en CSS como estaba arriba. ¿Alguien sabe cómo los navegadores que usan el tamaño de fondo: la cubierta calculan cómo escalar la imagen de manera adecuada? Quiero traducir esto a PHP.

Gracias

Answer 1

Aquí hay una lógica detrás de los cálculos de la cubierta.

Tienes cuatro valores base:

imgWidth // your original img width
imgHeight

containerWidth // your container  width (here 698px)
containerHeight

Dos razones derivadas de estos valores:

imgRatio = (imgHeight / imgWidth)       // original img ratio
containerRatio = (containerHeight / containerWidth)     // container ratio

Quieres encontrar dos nuevos valores:

finalWidth // the scaled img width
finalHeight

Asi que :

if (containerRatio > imgRatio) 
{
    finalHeight = containerHeight
    finalWidth = (containerHeight / imgRatio)
} 
else 
{
    finalWidth = containerWidth 
    finalHeight = (containerWidth / imgRatio)
}

... y tienes el equivalente de una cubierta de tamaño de fondo.

Answer 2

Cuando se utiliza background-size: cover , se escala al tamaño más pequeño que cubre todo el fondo.

Entonces, donde es más delgado que alto, escálelo hasta que su ancho sea el mismo que el área. Donde sea más alto que delgado, escálelo hasta que su altura sea la misma que el área.

Cuando sea más grande que el área a cubrir, redúzcala hasta que encaje (si hay menos desbordamiento en altura, escale hasta la misma altura, si hay menos desbordamiento en ancho, escale hasta el mismo ancho).

Answer 3

Gracias a mdi por indicarme la dirección correcta, pero eso no me pareció del todo correcto. Esta es la solución que me funcionó:

    $imgRatio = $imageHeight / $imageWidth;
    $canvasRatio = $canvasHeight / $canvasWidth;

    if ($canvasRatio > $imgRatio) {
        $finalHeight = $canvasHeight;
        $scale = $finalHeight / $imageHeight;
        $finalWidth = round($imageWidth * $scale , 0);
    } else {
        $finalWidth = $canvasWidth;
        $scale = $finalWidth / $imageWidth;
        $finalHeight = round($imageHeight * $scale , 0);
    }

Answer 4

Sé que esta es una pregunta muy antigua, pero la respuesta que escribí es en realidad más limpia al usar el máximo y los minutos en las relaciones entre las imágenes en lugar de cada imagen consigo misma:

var originalRatios = {
  width: containerWidth / imageNaturalWidth,
  height: containerHeight / imageNaturalHeight
};

// formula for cover:
var coverRatio = Math.max(originalRatios.width, originalRatios.height); 

// result:
var newImageWidth = imageNaturalWidth * coverRatio;
var newImageHeight = imageNaturalHeight * coverRatio;

Me gusta este enfoque porque es muy sistemático , tal vez sea la palabra equivocada. Lo que quiero decir es que puede deshacerse de las declaraciones if y hacer que funcione de una manera más "matemática" (entrada = salida, si eso tiene sentido):

var ratios = {
  cover: function(wRatio, hRatio) {
    return Math.max(wRatio, hRatio);
  },

  contain: function(wRatio, hRatio) {
    return Math.min(wRatio, hRatio);
  },

  // original size
  "auto": function() {
    return 1;
  },

  // stretch
  "100% 100%": function(wRatio, hRatio) {
    return { width:wRatio, height:hRatio };
  }
};

function getImageSize(options) {
  if(!ratios[options.size]) {
    throw new Error(size + " not found in ratios");
  }

  var r = ratios[options.size](
    options.container.width / options.image.width,
    options.container.height / options.image.height
  );

  return {
    width: options.image.width * (r.width || r),
    height: options.image.height * (r.height || r)
  };
}

jsbin un jsbin here si quiere echar un vistazo a lo que quiero decir con sistemático (también tiene un método de scale que pensé que no era necesario en esta respuesta pero que es muy útil para algo que no sea el habitual).