Ich habe Bilder, deren Größe ziemlich groß sein wird, und ich möchte sie mit jQuery verkleinern, während die Proportionen eingeschränkt bleiben, dh das gleiche Seitenverhältnis.
Kann mich jemand auf einen Code verweisen oder die Logik erklären?
javascript
jquery
image
resize
kobe
quelle
quelle
max-width
undmax-height
auf100%
.<img src='image.jpg' width=200>
Antworten:
Schauen Sie sich diesen Code von http://ericjuden.com/2009/07/jquery-image-resize/ an.
$(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 } }); });
quelle
max-width
undmax-height
auf100%
. jsfiddle.net/9EQ5cIch denke, das ist eine wirklich coole Methode :
/** * Conserve aspect ratio of the original 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 }; }
quelle
function calculateAspectRatioFit(dimensions) { /* then use such as dimensions.maxWidth , dimensions.srcWidth ...*/ }
und dem anschließenden Aufrufen vonfunction({ maxWidth: someWidth, srcWidth: someOtherWith, maxHeight: someHeight, srcHeight: someOtherHeight });
? Dies kann nützlich sein, um Probleme mit der Parameterreihenfolge zu vermeiden.Math.floor
wirklich helfen wird mit einem Pixel perfekt design :-)function imgSizeFit(img, maxWidth, maxHeight){ var ratio = Math.min(1, maxWidth / img.naturalWidth, maxHeight / img.naturalHeight); img.style.width = img.naturalWidth * ratio + 'px'; img.style.height = img.naturalHeight * ratio + 'px'; }
Wenn ich die Frage richtig verstehe, brauchen Sie dafür nicht einmal jQuery. Das proportionale Verkleinern des Bildes auf dem Client kann nur mit CSS erfolgen: Stellen Sie einfach das
max-width
undmax-height
auf ein100%
.<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>
Hier ist die Geige: http://jsfiddle.net/9EQ5c/
quelle
width: auto; height: auto;
, um Ihren Code zum Laufen zu bringen :)Um das Seitenverhältnis zu bestimmen , benötigen Sie ein anzustrebendes Verhältnis.
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); }
In diesem Beispiel verwende ich
16:10
seitdem das typische Monitor-Seitenverhältnis.var ratio = (16/10); var height = getHeight(300,ratio); var width = getWidth(height,ratio); console.log(height); console.log(width);
Ergebnisse von oben wären
147
und300
quelle
Eigentlich bin ich gerade auf dieses Problem gestoßen und die Lösung, die ich gefunden habe, war seltsam einfach und seltsam
$("#someimage").css({height:<some new height>})
und auf wundersame Weise wird das Bild auf die neue Höhe angepasst und das gleiche Verhältnis beibehalten!
quelle
Es gibt 4 Parameter für dieses Problem
Und es gibt 3 verschiedene bedingte Parameter
Lösung
das ist alles was du tun musst.
//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 ;
Dies ist ein ausgereiftes Forum, ich gebe dir keinen Code dafür :)
quelle
Hilft das
<img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" >
?Der Browser sorgt dafür, dass das Seitenverhältnis erhalten bleibt.
dh
max-width
tritt ein, wenn die Bildbreite größer als die Höhe ist und ihre Höhe proportional berechnet wird. Ähnlichesmax-height
gilt, wenn die Höhe größer als die Breite ist.Sie benötigen hierfür weder jQuery noch Javascript.
Unterstützt von ie7 + und anderen Browsern ( http://caniuse.com/minmaxwh ).
quelle
Dies sollte für Bilder mit allen möglichen Proportionen funktionieren
$(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 } }); });
quelle
Hier ist eine Korrektur zu Mehdiways Antwort. Die neue Breite und / oder Höhe wurde nicht auf den Maximalwert eingestellt. Ein guter Testfall ist der folgende (1768 x 1075 Pixel): http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png . (Ich konnte es oben nicht kommentieren, da es an Reputationspunkten mangelte.)
// 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); } }
quelle
$('#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 });
quelle
Wenn das Bild verhältnismäßig ist, füllt dieser Code den Wrapper mit Bild. Wenn das Bild nicht proportional ist, wird zusätzliche Breite / Höhe zugeschnitten.
<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>
quelle
Ohne zusätzliche Temp-Vars oder Klammern.
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; }
Denken Sie daran: Suchmaschinen mögen es nicht, wenn das Attribut width und height nicht zum Bild passt, sie aber JS nicht kennen.
quelle
Nach einigem Ausprobieren kam ich zu dieser Lösung:
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"; }
quelle
Die Größenänderung kann mithilfe von CSS erreicht werden (Beibehaltung des Seitenverhältnisses). Dies ist eine weitere vereinfachte Antwort, die von Dan Dascalescus Beitrag inspiriert wurde.
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"/>
quelle
2 Schritte:
Schritt 1) Berechnen Sie das Verhältnis der ursprünglichen Breite / ursprünglichen Höhe des Bildes.
Schritt 2) Multiplizieren Sie das Verhältnis original_width / original_height mit der neuen gewünschten Höhe, um die neue Breite zu erhalten, die der neuen Höhe entspricht.
quelle
Dieses Problem kann durch CSS gelöst werden.
quelle
Passen Sie die Größe an den Container an, erhalten Sie den Skalierungsfaktor und verkleinern Sie die prozentuale Kontrolle
$(function () { let ParentHeight = 200; let ParentWidth = 300; $("#Parent").width(ParentWidth).height(ParentHeight); $("#ParentHeight").html(ParentHeight); $("#ParentWidth").html(ParentWidth); var RatioOfParent = ParentHeight / ParentWidth; $("#ParentAspectRatio").html(RatioOfParent); let ChildHeight = 2000; let ChildWidth = 4000; var RatioOfChild = ChildHeight / ChildWidth; $("#ChildAspectRatio").html(RatioOfChild); let ScaleHeight = ParentHeight / ChildHeight; let ScaleWidth = ParentWidth / ChildWidth; let Scale = Math.min(ScaleHeight, ScaleWidth); $("#ScaleFactor").html(Scale); // old scale //ChildHeight = ChildHeight * Scale; //ChildWidth = ChildWidth * Scale; // reduce scale by 10%, you can change the percentage let ScaleDownPercentage = 10; let CalculatedScaleValue = Scale * (ScaleDownPercentage / 100); $("#CalculatedScaleValue").html(CalculatedScaleValue); // new scale let NewScale = (Scale - CalculatedScaleValue); ChildHeight = ChildHeight * NewScale; ChildWidth = ChildWidth * NewScale; $("#Child").width(ChildWidth).height(ChildHeight); $("#ChildHeight").html(ChildHeight); $("#ChildWidth").html(ChildWidth); });
#Parent { background-color: grey; } #Child { background-color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="Parent"> <div id="Child"></div> </div> <table> <tr> <td>Parent Aspect Ratio</td> <td id="ParentAspectRatio"></td> </tr> <tr> <td>Child Aspect Ratio</td> <td id="ChildAspectRatio"></td> </tr> <tr> <td>Scale Factor</td> <td id="ScaleFactor"></td> </tr> <tr> <td>Calculated Scale Value</td> <td id="CalculatedScaleValue"></td> </tr> <tr> <td>Parent Height</td> <td id="ParentHeight"></td> </tr> <tr> <td>Parent Width</td> <td id="ParentWidth"></td> </tr> <tr> <td>Child Height</td> <td id="ChildHeight"></td> </tr> <tr> <td>Child Width</td> <td id="ChildWidth"></td> </tr> </table>
quelle
Das hat bei mir für einen ziehbaren Gegenstand total funktioniert - AspektRatio: wahr
.appendTo(divwrapper).resizable({ aspectRatio: true, handles: 'se', stop: resizestop })
quelle