web-dev-qa-db-fra.com

Comment pouvez-vous étirer une image pour remplir un <div> tout en conservant le format de l'image?

Je dois étirer cette image à la taille maximale possible sans déborder, c'est <div> ou incliner l'image.

Je ne peux pas prédire le format de l'image. Il n'y a donc aucun moyen de savoir s'il faut utiliser:

<img src="url" style="width: 100%;">

ou

<img src="url" style="height: 100%;">

Je ne peux pas utiliser les deux (c'est-à-dire style = "width: 100%; height: 100%;") car cela dilaterait l'image au <div>.

Le <div> a une taille définie en pourcentage de l'écran, ce qui est également imprévisible.

imagehtmlsize
185
Giffyguy

Mise à jour 2016:

Navigateur moderne se comportent beaucoup mieux. Tout ce que vous devez faire est de régler la largeur de l’image sur 100% ( démo )

.container img {
   width: 100%;
}

Puisque 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

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

Scénario

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

Il existe un moyen beaucoup plus facile de faire cela en utilisant seulement CSS et HTML:

HTML:

<div class="fill"></div>

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'étirera pour l'adapter à la taille div sans distorsion.

70
Ryan

Pas une solution parfaite, mais ce CSS pourrait aider. Le zoom est ce qui fait que ce code fonctionne, et le facteur devrait théoriquement être infini pour fonctionner parfaitement pour les petites images - mais 2, 4 ou 8 fonctionnent bien 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%;
}
69
Prouda

Si vous le pouvez, utilisez des images d’arrière-plan et définissez background-size: cover. Cela fera que l’arrière-plan couvre l’ensemble de l’élément.

CSS

div {
  background-image: url(path/to/your/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 existe quelques options. Tout d'abord, il y a

object-fit

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

CSS

img {
  object-fit: cover;
}

Malheureusement, support du navigateur n’est pas très bon, IE jusqu’à la version 11 ne le supporte pas du tout. L'option suivante utilise jQuery

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

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

Personnalisé plugin jQuery

(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 image d'arrière-plan sur l'élément enveloppant de l'image et supprimera la balise img du document. Enfin, vous pouvez utiliser

CSS pur

Vous pouvez utiliser ceci comme solution de secours. L'image sera agrandie pour couvrir son conteneur mais 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 pourra aider quelqu'un, codage heureux!

29
daniels

Merci à CSS3

img
{
   object-fit: contain;
}

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

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

13
It_Never_Works

C'est impossible avec seulement HTML et CSS, ou du moins exotique et compliqué. Si vous êtes prêt à utiliser 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 redimensionnera 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 redimensionnera 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.

6
Tatu Ulmanen

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

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

Cela vous aidera à garder un rapport d'aspect de votre img

5
Chintan Bhatt

Je suis tombé sur cette question à la recherche d'un problème similaire. 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 sur un pourcentage de la largeur de l'écran. La hauteur est définie avec une valeur vw.

Puisque j'ajoute des publications avec PHP et un backend de base de données, le CSS pur était hors de question. Cependant, j’ai trouvé la solution jQuery/javascript un peu envahissante, j’ai donc trouvé une solution soignée (donc je me pense au moins moi-même).

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;
}
<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

En utilisant style = "", il est possible de demander à PHP de mettre à jour ma page de manière dynamique. Le style CSS associé à style = "" aboutira à une image parfaitement couverte, mise à l'échelle pour couvrir le balise div dynamique.

4
Christian Jensen

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 des images, procédez comme suit:

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

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

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

3
Amrit Anandh

En utilisant cette méthode, vous pouvez renseigner votre div avec le rapport d’image variant entre div et images.

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:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS:

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

Pour que cette image s’étire jusqu’à taille maximale possible sans débordement c’est ou fausser l’image.

Appliquer...

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

styles à l'image.

3
ianbeans

Cela a fait le tour pour moi

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

Mise à jour 2019.

Vous pouvez maintenant utiliser la propriété object-fit css qui accepte les valeurs suivantes: fill | contain | cover | none | scale-down

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

Par exemple, vous pourriez avoir un conteneur qui contient une image.

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
2
Ed Stennett

si vous travaillez avec un tag IMG, c'est facile.

J'ai fait ça:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(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

2
aleXela

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

... Et si vous souhaitez définir ou modifier l'image (en utilisant #foo comme exemple):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";
1
Patch92

Beaucoup de solutions trouvées ici ont quelques limitations: certaines ne fonctionnent pas dans IE (ajustement d'objet) ou dans des navigateurs plus anciens, d'autres solutions ne redimensionnent pas les images (ne les réduisent que), beaucoup de solutions ne prennent pas en charge le redimensionnement. de la fenêtre et beaucoup ne sont pas génériques, attendez-vous à une résolution ou à une mise en page (portrait ou paysage)

Si l’utilisation de javascript et jquery n’est pas un problème, j’ai cette solution basée sur le code de @Tatu Ulmanen. J'ai corrigé certains problèmes, et ajouté du code au cas où l'image serait chargée de façon dynamique et non disponible au début. En gros, l’idée est d’avoir deux règles CSS différentes et de les appliquer si nécessaire: l’une lorsque la limite est la hauteur, nous devons donc afficher des barres noires sur les côtés, et la règle css lorsque la limite est la largeur, nous devons donc montre des barres noires en haut/en bas.

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
});

Pour un élément HTML tel que:

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>
1
jolumg

J'ai eu le même problème. Je l'ai résolu avec seulement CSS .

De manière générale, Object-fit: cover vous aide à conserver le rapport de format tout en positionnant une image dans un div.

Mais le problème était que Object-fit: cover ne fonctionnait pas dans IE et qu'il prenait 100% de la largeur et 100% de la hauteur et que le rapport de format était déformé. En d'autres termes, il n'y avait pas d'effet de zoom sur l'image que je voyais en chrome.

L’approche que j’ai choisie consistait à positionner l’image à l’intérieur du conteneur avec absolute , puis et placez-la au centre en utilisant la combinaison:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Une fois au centre, je donne à l'image,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Cela donne à l'image l'effet de Object-fit: cover.

Voici une démonstration de la logique ci-dessus.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Cette logique fonctionne dans tous les navigateurs.

0
Mohammed Furqan Rahamath M