Image Javascript Redimensionner
est-ce que quelqu'un sait comment redimensionner les images proportionnellement en utilisant JavaScript?
j'ai essayé de modifier le DOM en ajoutant les attributs height et width à la volée, mais semble ne pas fonctionner sur IE6.
13 réponses
pour modifier une image proportionnellement, il suffit de modifier une seule des propriétés CSS largeur/hauteur, laissez l'autre paramétrée à auto.
image.style.width = '50%'
image.style.height = 'auto'
cela permettra de s'assurer que son format reste le même.
gardez à l'esprit que les navigateurs ont tendance à sucer à redimensionner les images bien - vous trouverez probablement que votre image redimensionnée semble horrible.
OK, c'est résolu, voici mon code final
if($(this).width() > $(this).height()) {
$(this).css('width',MaxPreviewDimension+'px');
$(this).css('height','auto');
} else {
$(this).css('height',MaxPreviewDimension+'px');
$(this).css('width','auto');
}
Merci les gars
au lieu de modifier les attributs hauteur et largeur de l'image, essayez de modifier la hauteur et la largeur CSS.
myimg = document.getElementById('myimg');
myimg.style.height = "50px";
myimg.style.width = "50px";
un "gotcha" commun est que les styles de hauteur et de largeur sont des cordes qui comprennent une unité, comme "px" dans l'exemple ci-dessus.
Edit-je pense que le réglage de la hauteur et la largeur directement au lieu d'utiliser le style.de la hauteur et du style.largeur de travail. Elle aurait aussi l'avantage d'avoir déjà l'original dimension. Pouvez-vous poster un peu de votre code? Etes-vous sûr que vous êtes en mode standard plutôt qu'en mode bizarreries?
cela devrait fonctionner:
myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
j'ai répondu à cette question ici: Comment redimensionner des images proportionnellement / garder le ratio d'aspect? . Je copie ici parce que je pense vraiment que c'est une méthode très fiable :)
/**
* 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 };
}
a essayé le code suivant, a bien fonctionné sur IE6 sur WinXP Pro SP3.
function Resize(imgId)
{
var img = document.getElementById(imgId);
var w = img.width, h = img.height;
w /= 2; h /= 2;
img.width = w; img.height = h;
}
aussi OK dans FF3 et Opera 9.26.
exemple: comment redimensionner avec un pourcentage
<head>
<script type="text/javascript">
var CreateNewImage = function (url, value) {
var img = new Image;
img.src = url;
img.width = img.width * (1 + (value / 100));
img.height = img.height * (1 + (value / 100));
var container = document.getElementById ("container");
container.appendChild (img);
}
</script>
</head>
<body>
<button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 40);">Zoom +40%</button>
<button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 60);">Zoom +50%</button>
<div id="container"></div>
</body>
vous ne devez pas le faire avec Javascript. Vous pouvez simplement créer une classe CSS et l'appliquer à votre étiquette.
.preview_image{
width: 300px;
height: auto;
border: 0px;
}
Cela fonctionne pour tous les cas.
function resizeImg(imgId) {
var img = document.getElementById(imgId);
var $img = $(img);
var maxWidth = 110;
var maxHeight = 100;
var width = img.width;
var height = img.height;
var aspectW = width / maxWidth;
var aspectH = height / maxHeight;
if (aspectW > 1 || aspectH > 1) {
if (aspectW > aspectH) {
$img.width(maxWidth);
$img.height(height / aspectW);
}
else {
$img.height(maxHeight);
$img.width(width / aspectH);
}
}
}
Use JQuery
var scale=0.5;
minWidth=50;
minHeight=100;
if($("#id img").width()*scale>minWidth && $("#id img").height()*scale >minHeight)
{
$("#id img").width($("#id img").width()*scale);
$("#id img").height($("#id img").height()*scale);
}
essayez ceci..
<html>
<body>
<head>
<script type="text/javascript">
function splitString()
{
var myDimen=document.getElementById("dimen").value;
var splitDimen = myDimen.split("*");
document.getElementById("myImage").width=splitDimen[0];
document.getElementById("myImage").height=splitDimen[1];
}
</script>
</head>
<h2>Norwegian Mountain Trip</h2>
<img border="0" id="myImage" src="..." alt="Pulpit rock" width="304" height="228" /><br>
<input type="text" id="dimen" name="dimension" />
<input type="submit" value="Submit" Onclick ="splitString()"/>
</body>
</html>
dans la zone de texte donner la dimension que vous souhaitez, dans le format 50*60. Cliquez sur soumettre. Vous obtiendrez l'image redimensionnée. Donnez votre chemin d'image à la place des points dans l'étiquette d'image.
function resize_image(image, w, h) {
if (typeof(image) != 'object') image = document.getElementById(image);
if (w == null || w == undefined)
w = (h / image.clientHeight) * image.clientWidth;
if (h == null || h == undefined)
h = (w / image.clientWidth) * image.clientHeight;
image.style['height'] = h + 'px';
image.style['width'] = w + 'px';
return;
}
il suffit de le passer soit un élément img DOM, ou l'id d'un élément image, et la nouvelle largeur et la hauteur.
ou vous pouvez le passer juste la largeur ou juste la hauteur (si seulement la hauteur, puis passer la largeur comme nul ou non défini) et il va redimensionner maintien du rapport d'aspect
pour redimensionner l'image en javascript:
$(window).load(function() {
mitad();doble();
});
function mitad(){
imag0.width=imag0.width/2;
imag0.height=imag0.height/2;
}
function doble(){
imag0.width=imag0.width*2;
imag0.height=imag0.height*2;}
imag0 est le nom de l'image:
<img src="xxx.jpg" name="imag0">
voici ma solution de remplissage de couverture (similaire à background-size: cover, mais elle prend en charge l'ancien navigateur IE)
<div class="imgContainer" style="height:100px; width:500px; overflow:hidden; background-color: black">
<img src="http://dev.isaacsonwebdevelopment.com/sites/development/files/views-slideshow-settings-jquery-cycle-custom-options-message.png" id="imgCat">
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script>
$(window).load(function() {
var heightRate =$("#imgCat").height() / $("#imgCat").parent(".imgContainer").height();
var widthRate = $("#imgCat").width() / $("#imgCat").parent(".imgContainer").width();
if (window.console) {
console.log($("#imgCat").height());
console.log(heightRate);
console.log(widthRate);
console.log(heightRate > widthRate);
}
if (heightRate <= widthRate) {
$("#imgCat").height($("#imgCat").parent(".imgContainer").height());
} else {
$("#imgCat").width($("#imgCat").parent(".imgContainer").width());
}
});
</script>