Comment étirer une image pour remplir un tout en conservant le rapport d’aspect de l’image?

Je dois étirer cette image à la taille maximale possible sans déborder sur

ou en inclinant l’image.

Je ne peux pas prédire le rapport hauteur / largeur de l’image, il n’y a donc aucun moyen de savoir s’il faut utiliser:

 <img src="http://soffr.miximages.com/image/url" style=" width : 100%;"> 

ou

 <img src="http://soffr.miximages.com/image/url" style=" height : 100%;"> 

Je ne peux pas utiliser les deux (c.-à-d. Style = “width: 100%; height: 100%;”) car cela va étirer l’image pour l’adapter à la

.

Le

a une taille définie en pourcentage de l’écran, ce qui est également imprévisible.

Mise à jour 2016:

Le navigateur moderne se comporte beaucoup mieux. Tout ce que vous devez faire est de définir la largeur de l’image à 100% ( démo )

 .container img { width: 100%; } 

Comme vous ne connaissez pas les proportions, vous devrez utiliser des scripts. Voici comment je le ferais avec jQuery ( démo ):

CSS

 .container { width: 40%; height: 40%; background: #444; margin: 0 auto; } .container img.wide { max-width: 100%; max-height: 100%; height: auto; } .container img.tall { max-height: 100%; max-width: 100%; width: auto; }​ 

HTML

 


Scénario

 $(window).load(function(){ $('.container').find('img').each(function(){ var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall'; $(this).addClass(imgClass); }) }) 

Pas une solution parfaite, mais ce CSS peut aider. Le zoom est ce qui fait fonctionner ce code, et le facteur devrait théoriquement être infini pour fonctionner idéalement pour les petites images – mais 2, 4 ou 8 fonctionne correctement dans la plupart des cas.

 #myImage { zoom: 2; //increase if you have very small images display: block; margin: auto; height: auto; max-height: 100%; width: auto; max-width: 100%; } 

Il existe un moyen beaucoup plus simple de le faire en utilisant uniquement CSS et HTML :

HTML:

 

CSS:

 .fill { overflow: hidden; background-size: cover; background-position: center; background-image: url('path/to/image.jpg'); } 

Cela placera votre image comme arrière-plan et l’étirez pour l’adapter à la taille de l’image sans déformation.

Si vous le pouvez, utilisez des images d’ background-size: cover et définissez la background-size: cover . Cela permettra à l’arrière-plan de couvrir l’élément entier.

CSS

 div { background-image: url(path/to/your/https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat/image.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } 

Si vous êtes coincé avec l’utilisation d’images en ligne, il y a quelques options. Tout d’abord, il y a

ajustement d’object

Cette propriété agit sur les images, vidéos et autres objects similaires à la background-size: cover de background-size: cover .

CSS

 img { object-fit: cover; } 

Malheureusement, la prise en charge du navigateur n’est pas géniale, car IE jusqu’à la version 11 ne le supporte pas du tout. La prochaine option utilise jQuery

CSS + jQuery

HTML

 

CSS

 div { height: 8em; width: 15em; } 

Plugin jQuery personnalisé

 (function ($) { $.fn.coverImage = function(contain) { this.each(function() { var $this = $(this), src = $this.get(0).src, $wrapper = $this.parent(); if (contain) { $wrapper.css({ 'background': 'url(' + src + ') 50% 50%/contain no-repeat' }); } else { $wrapper.css({ 'background': 'url(' + src + ') 50% 50%/cover no-repeat' }); } $this.remove(); }); return this; }; })(jQuery); 

Utilisez le plugin comme ça

 jQuery('.cover-image').coverImage(); 

Il prendra une image, la définira comme une image d’arrière-plan sur l’élément wrapper de l’image et supprimera la balise img du document. Enfin, vous pouvez utiliser

CSS pur

Vous pourriez l’utiliser comme solution de rechange. L’image sera plus grande pour couvrir son conteneur mais elle ne sera pas réduite.

CSS

 div { height: 8em; width: 15em; overflow: hidden; } div img { min-height: 100%; min-width: 100%; width: auto; height: auto; max-width: none; max-height: none; display: block; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

J’espère que cela pourrait aider quelqu’un, heureux de coder!

Merci à CSS3

 img { object-fit: contain; } 

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

IE et EDGE comme toujours des étrangers: http://caniuse.com/#feat=object-fit

C’est impossible avec juste HTML et CSS, ou du moins farouchement exotique et compliqué. Si vous êtes prêt à lancer du javascript, voici une solution utilisant jQuery:

 $(function() { $(window).resize(function() { var $i = $('img#image_to_resize'); var $c = $img.parent(); var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height(); $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar)); }); $(window).resize(); }); 

Cela va redimensionner l’image pour qu’elle tienne toujours dans l’élément parent, quelle que soit sa taille. Et comme il est lié à l’événement $(window).resize() , lorsque l’utilisateur redimensionne la fenêtre, l’image sera ajustée.

Cela n’essaie pas de centrer l’image dans le conteneur, ce serait possible mais je suppose que ce n’est pas ce que vous recherchez.

Définissez la largeur et la hauteur du div du container externe. Ensuite, utilisez le style ci-dessous sur img:

 .container img{ width:100%; height:auto; max-height:100%; } 

Cela vous aidera à garder un ratio d’aspect de votre img

Je suis tombé sur cette question en cherchant un problème simulé. Je crée une page Web avec un design réactif et la largeur des éléments placés sur la page est définie à un pourcentage de la largeur de l’écran. La hauteur est définie avec une valeur vw.

Comme j’ajoute des articles avec PHP et un backend de firebase database, le CSS pur était hors de question. J’ai toutefois trouvé la solution jQuery / javascript un peu compliquée, alors j’ai trouvé une solution soignée (donc je me dis au moins).

HTML (ou php)

 div.imgfill { float: left; position: relative; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; width: 33.333%; height: 18vw; border: 1px solid black; /*frame of the image*/ margin: -1px; } 
 
This might be some info
This might be some info
This might be some info

En utilisant cette méthode, vous pouvez remplir votre div avec le ratio de divs et d’images variable.

jQuery:

 $(window).load(function(){ $('body').find(.fillme).each(function(){ var fillmeval = $(this).width()/$(this).height(); var imgval = $this.children('img').width()/$this.children('img').height(); var imgClass; if(imgval > fillmeval){ imgClass = "stretchy"; }else{ imgClass = "stretchx"; } $(this).children('img').addClass(imgClass); }); }); 

HTML:

 

CSS:

 .fillme{ overflow:hidden; } .fillme img.stretchx{ height:auto; width:100%; } .fillme img.stretchy{ height:100%; width:auto; } 

Cela a fait le tour pour moi

 div img { width: 100%; min-height: 500px; width: 100vw; height: 100vh; object-fit: cover; } 

Si vous travaillez avec le tag IMG, c’est facile.

J’ai fabriqué ça:

  
$(document).ready(function(){ $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' }) )}

mais je n’ai pas trouvé comment le faire fonctionner avec #pic {background: url (img / menu.png)} Enyone? Merci

Vous pouvez utiliser un object-fit: cover; sur le div parent.

https://css-sortingcks.com/almanac/properties/o/object-fit/

Pour que cette image soit étendue à la taille maximale possible sans déborder elle ou incliner l’image.

Appliquer…

 img { object-fit: cover; height: -webkit-fill-available; } 

styles à l’image.

HTML:

  

JSFiddle

… Et si vous voulez définir ou modifier l’image (en utilisant #foo comme exemple):

jQuery:

 $("#foo").css("background-image", "url('path/to/https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat/image.png')"); 

JavaScript:

 document.getElementById("foo").style.backgroundImage = "url('path/to/https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat/image.png')"; 

Si vous souhaitez définir une largeur ou une hauteur maximale (afin qu’elle ne soit pas très grande) tout en conservant le format d’image, vous pouvez le faire:

 img{ object-fit: contain; max-height: 70px; }