javascript - resolucion - ¿Cómo cambiar el tamaño de las imágenes proporcionalmente/mantener la relación de aspecto?

relacion de aspecto fotografia

Question

Tengo imágenes que serán bastante grandes en dimensión y quiero reducirlas con jQuery mientras mantengo las proporciones restringidas, es decir, la misma relación de aspecto.

¿Puede alguien señalarme algún código o explicar la lógica?

Answer 1

Aquí hay una corrección a la respuesta de Mehdiway. El nuevo ancho y / o alto no se establecieron en el valor máximo. Un buen caso de prueba es el siguiente (1768 x 1075 píxeles): http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png . (No pude comentarlo anteriormente debido a la falta de puntos de reputación).

 // Make sure image doesn''t exceed 100x100 pixels
// note: takes jQuery img object not HTML: so width is a function
// not a property.
function resize_image (image) {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
// Get current dimensions
var width = image.width()
var height = image.height();
console.log("dimensions: " + width + "x" + height);
// If the current width is larger than the max, scale height
// to ratio of max width to current and then set width to max.
if (width > maxWidth) {
console.log("Shrinking width (and scaling height)")
ratio = maxWidth / width;
height = height * ratio;
width = maxWidth;
image.css("width", width);
image.css("height", height);
console.log("new dimensions: " + width + "x" + height);
}
// If the current height is larger than the max, scale width
// to ratio of max height to current and then set height to max.
if (height > maxHeight) {
console.log("Shrinking height (and scaling width)")
ratio = maxHeight / height;
width = width * ratio;
height = maxHeight;
image.css("width", width);
image.css("height", height);
console.log("new dimensions: " + width + "x" + height);
}
}

Answer 2

Creo que este es un método realmente genial :

 /**
* Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging
* images to fit into a certain area.
*
* @param {Number} srcWidth width of source image
* @param {Number} srcHeight height of source image
* @param {Number} maxWidth maximum available width
* @param {Number} maxHeight maximum available height
* @return {Object} { width, height }
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return { width: srcWidth*ratio, height: srcHeight*ratio };
}

Answer 3

Después de algunas pruebas y errores llegué a esta solución:

function center(img) {
var div = img.parentNode;
var divW = parseInt(div.style.width);
var divH = parseInt(div.style.height);
var srcW = img.width;
var srcH = img.height;
var ratio = Math.min(divW/srcW, divH/srcH);
var newW = img.width * ratio;
var newH = img.height * ratio;
img.style.width = newW + "px";
img.style.height = newH + "px";
img.style.marginTop = (divH-newH)/2 + "px";
img.style.marginLeft = (divW-newW)/2 + "px";
}

Answer 4

Echa un vistazo a esta pieza ...

/**
* @param {Number} width
* @param {Number} height
* @param {Number} destWidth
* @param {Number} destHeight
*
* @return {width: Number, height:Number}
*/
function resizeKeepingRatio(width, height, destWidth, destHeight)
{
if (!width || !height || width <= 0 || height <= 0)
{
throw "Params error";
}
var ratioW = width / destWidth;
var ratioH = height / destHeight;
if (ratioW <= 1 && ratioH <= 1)
{
var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH);
width *= ratio;
height *= ratio;
}
else if (ratioW > 1 && ratioH <= 1)
{
var ratio = 1 / ratioW;
width *= ratio;
height *= ratio;
}
else if (ratioW <= 1 && ratioH > 1)
{
var ratio = 1 / ratioH;
width *= ratio;
height *= ratio;
}
else if (ratioW >= 1 && ratioH >= 1)
{
var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH);
width *= ratio;
height *= ratio;
}
return {
width : width,
height : height
};
}

Answer 5

Eche un vistazo a este fragmento de código de http://ericjuden.com/2009/07/jquery-image-resize/

$(document).ready(function() {
$(''.story-small img'').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
height = height * ratio; // Reset height to match scaled image
}
});
});

Answer 6

El tamaño se puede lograr (manteniendo la relación de aspecto) usando CSS. Esta es una respuesta más simplificada inspirada en la publicación de Dan Dascalescu.

http://jsbin.com/viqare

img{
max-width:200px;
/*Or define max-height*/
}

<img src="http://e1.365dm.com/13/07/4-3/20/alastair-cook-ashes-profile_2967773.jpg" alt="Alastair Cook" />
<img src="http://e1.365dm.com/13/07/4-3/20/usman-khawaja-australia-profile_2974601.jpg" alt="Usman Khawaja"/>

Answer 7

Esto debería funcionar para imágenes con todas las proporciones posibles

$(document).ready(function() {
$(''.list img'').each(function() {
var maxWidth = 100;
var maxHeight = 100;
var width = $(this).width();
var height = $(this).height();
var ratioW = maxWidth / width; // Width ratio
var ratioH = maxHeight / height; // Height ratio
// If height ratio is bigger then we need to scale height
if(ratioH > ratioW){
$(this).css("width", maxWidth);
$(this).css("height", height * ratioW); // Scale height according to width ratio
}
else{ // otherwise we scale width
$(this).css("height", maxHeight);
$(this).css("width", height * ratioH); // according to height ratio
}
});
});

Answer 8

Esto me funcionó por completo para un artículo arrastrable - aspectRatio: true

.appendTo(divwrapper).resizable({
aspectRatio: true,
handles: ''se'',
stop: resizestop
})

Answer 9

Hay 4 parámetros para este problema

1. ancho de imagen actual iX
2. altura actual de la imagen iY
3. ancho de ventana de destino cX
4. altura de la ventana objetivo cY

Y hay 3 diferentes parámetros condicionales

1. cX> cY?
2. iX> cX?
3. iY> cY?

solución

1. Encuentra el lado más pequeño del puerto de visualización de destino F
2. Encuentre el lado más grande del puerto de vista actual L
3. Encuentre el factor de ambos F / L = factor
4. Multiplique ambos lados del puerto actual con el factor ie, factor fX = iX *; fY = iY * factor

eso es todo lo que necesitas hacer.

//Pseudo code
iX;//current width of image in the client
iY;//current height of image in the client
cX;//configured width
cY;//configured height
fX;//final width
fY;//final height
1. check if iX,iY,cX,cY values are >0 and all values are not empty or not junk
2. lE = iX > iY ? iX: iY; //long edge
3. if ( cX < cY )
then
4. factor = cX/lE;
else
5. factor = cY/lE;
6. fX = iX * factor ; fY = iY * factor ;

Este es un foro maduro, no te doy el código para eso :)

Answer 10

Para determinar la relación de aspecto , debe tener una proporción para apuntar.

function getHeight(length, ratio) {
var height = ((length)/(Math.sqrt((Math.pow(ratio, 2)+1))));
return Math.round(height);
}

function getWidth(length, ratio) {
var width = ((length)/(Math.sqrt((1)/(Math.pow(ratio, 2)+1))));
return Math.round(width);
}

En este ejemplo, uso 16:10 ya que esta es la relación de aspecto típica del monitor.

var ratio = (16/10);
var height = getHeight(300,ratio);
var width = getWidth(height,ratio);
console.log(height);
console.log(width);

Los resultados de arriba serían 147 y 300

Answer 11

Si entiendo la pregunta correctamente, ni siquiera necesitas jQuery para esto. Reducir la imagen proporcionalmente en el cliente se puede hacer con CSS solo: simplemente establezca su max-width max-height en 100% .

<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
style="max-height: 100%; max-width: 100%">
</div>​

Aquí está el violín: jsfiddle.net/9EQ5c

Answer 12

Si la imagen es proporcional, este código llenará el contenedor con la imagen. Si la imagen no está en proporción, el ancho / alto extra se recortará.

 <script type="text/javascript">
$(function(){
$(''#slider img'').each(function(){
var ReqWidth = 1000; // Max width for the image
var ReqHeight = 300; // Max height for the image
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if (width > height && height < ReqHeight) {
$(this).css("min-height", ReqHeight); // Set new height
}
else
if (width > height && width < ReqWidth) {
$(this).css("min-width", ReqWidth); // Set new width
}
else
if (width > height && width > ReqWidth) {
$(this).css("max-width", ReqWidth); // Set new width
}
else
(height > width && width < ReqWidth)
{
$(this).css("min-width", ReqWidth); // Set new width
}
});
});
</script>

Answer 13

Sin temp-vars o corchetes adicionales.

 var width= $(this).width(), height= $(this).height()
, maxWidth=100, maxHeight= 100;
if(width > maxWidth){
height = Math.floor( maxWidth * height / width );
width = maxWidth
}
if(height > maxHeight){
width = Math.floor( maxHeight * width / height );
height = maxHeight;
}

Tenga en cuenta: a los motores de búsqueda no les gusta, si el atributo de ancho y alto no se ajusta a la imagen, pero no conocen JS.

Answer 14

en realidad acabo de encontrarme con este problema y la solución que encontré fue extrañamente simple y extraña

$("#someimage").css({height:<some new height>})

¡y milagrosamente la imagen se redimensiona a la nueva altura y conserva la misma proporción!

Answer 15

<img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" > <img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" > ayuda?

El navegador se ocupará de mantener intacta la relación de aspecto.

es decir, el max-width inicia cuando el ancho de la imagen es mayor que la altura y su altura se calculará proporcionalmente. Del mismo modo max-height tendrá efecto cuando la altura sea mayor que el ancho.

No necesita ningún jQuery o javascript para esto.

Compatible con ie7 + y otros navegadores ( http://caniuse.com/minmaxwh ).

Answer 16

 $(''#productThumb img'').each(function() {
var maxWidth = 140; // Max width for the image
var maxHeight = 140; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > height){
height = ( height / width ) * maxHeight;
} else if(height > width){
maxWidth = (width/height)* maxWidth;
}
$(this).css("width", maxWidth); // Set new width
$(this).css("height", maxHeight); // Scale height based on ratio
});