Comment étirer une image pour remplir un tout en gardant le format de l'image?

pas une solution parfaite, mais ce CSS pourrait 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 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%;
}

il y a une façon beaucoup plus facile de le faire 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 s'adapter à la taille div sans distorsion.

si vous le pouvez, utilisez les images de fond et mettez background-size: cover . L'arrière-plan couvrira donc 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 ya quelques options. D'abord, il y a

object-fit

cette propriété agit sur des images, des vidéos et d'autres objets similaires à background-size: cover .

CSS

img {
  object-fit: cover;
}

Malheureusement, prise en charge du navigateur n'est pas super avec internet explorer jusqu'à la version 11 n'est pas soutenu. 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 ceci

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

il prendra une image, la définira comme une image de fond sur l'élément d'enrubannage de l'image et supprimera la balise img du document. Enfin vous pouvez utiliser

pur CSS

vous pourriez utiliser ceci comme un repli. L'image sera agrandie 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%);
}

Hope cela peut aider quelqu'un, amusez-vous!

merci à CSS3

img
{
   object-fit: contain;
}

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

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

c'est impossible avec juste HTML et CSS, ou au moins follement exotique et compliqué. Si vous êtes prêt à ajouter du javascript, voici une solution en 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();
});

qui redimensionnera l'image pour qu'elle rentre toujours dans l'élément parent, quelle que soit sa taille. Et comme il est relié à l'événement $(window).resize() , lorsque l'utilisateur redimensionne la fenêtre, l'image s'ajustera.

cela ne tente pas de centrer l'image dans le conteneur, ce serait possible, mais je suppose que ce n'est pas ce que vous êtes après.

Définir la largeur et la hauteur de l'extérieur 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

je suis tombé sur cette question à la recherche d'un problème similaire. Je fais une page Web avec un design responsive et la largeur des éléments placés sur la page est réglée à un pourcentage de la largeur de l'écran. La hauteur est réglée avec une valeur vw.

puisque je suis en train d'ajouter des messages avec PHP et un backend de base de données, CSS pur était hors de question. J'ai cependant trouvé la solution jquery/javascript un peu troblesome, donc je suis venu avec une solution soignée (donc je pense moi-même 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;
}

<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 D'avoir PHP mettre à jour ma page dynamiquement et le style CSS avec style=" " finira dans une image parfaitement couverte, échelle pour couvrir le div-tag dynamique.

en utilisant cette méthode, vous pouvez remplir votre div avec le rapport d'image variant de divs et d'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;
}

Cela a fonctionné pour moi

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

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

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

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

j'ai fait ceci:

<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

pour rendre cette image étirer à la taille maximale possible sans déborder c'est ou bifurquer l'image.

S'applique...

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

styles à l'image.

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 voulez 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')";

si vous souhaitez définir une largeur ou une hauteur maximale (de sorte qu'elle ne sera pas très grande) tout en conservant le format des images, vous pouvez le faire:

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