web-dev-qa-db-fra.com

Assurez le remplissage d'image complètement sans étirement

J'ai de grandes images de différentes dimensions qui doivent remplir complètement les conteneurs de 240px par 300px dans les deux dimensions. Voici ce que j'ai en ce moment, qui ne fonctionne que pour une dimension:

http://jsfiddle.net/HsE6H/

HTML

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

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

Les proportions devraient rester les mêmes. Essentiellement, les images larges doivent être coupées en largeur, alors que les images hautes doivent être coupées en hauteur. Il suffit donc de zoomer autant que nécessaire pour remplir le récipient.

Je ne sais pas pourquoi je n'arrive pas à le faire fonctionner, ai-je besoin de JavaScript pour cela?

Edit: Pour être clair. Il me faut tout ce qui est rouge au violon. Les images qui arrivent sont dynamiques, donc je ne peux pas utiliser d'images d'arrière-plan. Je suis ouvert à l'utilisation de JavaScript. Merci! :)

javascripthtmlcssimage
20
Lennart

Taille automatique des images pour correspondre à une div - Rendre le CSS fonctionnel

Voici une façon de le faire, commençons par le code HTML suivant:

<div class="container portrait">
    <h4>Portrait Style</h4>
    <img src="http://placekitten.com/150/300">
</div>

et le CSS:

.container {
    height: 300px;
    width: 240px;
    background-color: red;
    float: left;
    overflow: hidden;
    margin: 20px;
}
.container img {
    display: block;
}

.portrait img {
    width: 100%;
}
.landscape img {
    height: 100%;
}

et le violon démo: http://jsfiddle.net/audetwebdesign/QEpJH/

Lorsque vous avez une image orientée comme un portrait, vous devez redimensionner la largeur à 100%. À l'inverse, lorsque l'image est orientée paysage, vous devez redimensionner la hauteur.

Malheureusement, il n'y a pas de combinaison de sélecteurs dans CSS qui cible le rapport de format de l'image, vous ne pouvez donc pas utiliser CSS pour choisir la bonne mise à l'échelle.

De plus, vous n’avez pas de moyen facile de centrer l’image car le coin supérieur gauche de l’image est épinglé dans le coin supérieur gauche du bloc conteneur.

jQuery Helper

Vous pouvez utiliser l'action jQuery suivante pour déterminer la classe à définir en fonction du rapport de format de l'image.

$(".container").each(function(){
    // Uncomment the following if you need to make this dynamic
    //var refH = $(this).height();
    //var refW = $(this).width();
    //var refRatio = refW/refH;

    // Hard coded value...
    var refRatio = 240/300;

    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < refRatio ) { 
        $(this).addClass("portrait");
    } else {
        $(this).addClass("landscape");
    }
})

Pour chaque image dans .container, obtenez la hauteur et la largeur, testez si width<height, puis définissez la classe appropriée.

De plus, j'ai ajouté un chèque pour prendre en compte le rapport de format du bloc conteneur . Avant, j'avais implicitement supposé un panneau de vue carré.

40
Marc Audet

Supprimer la ligne: max-width: 100% dans votre fichier CSS semble faire l'affaire.

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
height: auto;
}

Vous pouvez aussi ajouter> à votre div de clôture dans votre fichier HTML pour rendre le code plus net.

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div>

Voici un lien JSFiddle qui fonctionne: http://jsfiddle.net/HsE6H/19/

3
Jcpopp

Pour ceux qui souhaitent faire cela sans images dynamiques, voici une solution entièrement CSS utilisant background-image.

<div class="container" 
    style="background-image: url('http://placehold.it/300x1500'); 
    background-size: cover; background-position: center;">
</div>
<div class="container" 
    style="background-image: url('http://placehold.it/1500x300'); 
    background-size: cover; background-position: center;">
</div>

La "taille de l'arrière-plan: couverture" permet de redimensionner l'image tout en maintenant le format. Le CSS pourrait également être déplacé vers un fichier CSS. Cependant, si elle est générée dynamiquement, la propriété background-image devra rester dans l'attribut style.

3
BurningLights

J'ai utilisé ce plugin qui représente n'importe quel ratio. Il faut également que imagesloaded plugin fonctionne. Cela serait utile pour de nombreuses images d'un site nécessitant ce traitement. Simple à initier aussi.

https://github.com/johnpolacek/imagefill.js/

2
lxm7

Le fond peut le faire

  1. définir l'image comme arrière-plan

2.

div {
   -webkit-background-size: auto 100%;
   -moz-background-size: auto 100%;
   -o-background-size: auto 100%;
   background-size: auto 100%;
}

ou 

div {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
2
comonitos

Vous devriez essayer ceci: 

img {
    min-width:100%;
    min-height:100%;
}
2
user3710425

Cela fonctionne si vous ajoutez les éléments suivants à la division parent pour le style img: https://jsfiddle.net/yrrncees/10/

.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}
1
CodingSince007

Cela pourrait faire le travail:

.container {
    float: left;
    height: 300px;
    width: 240px;
    background-color: red;
    margin: 20px;
}

img {
    width:240px;
    height:300px;
}
0
SAST

Je suis tombé sur ce sujet parce que j'essayais de résoudre un problème similaire. Puis une ampoule s’est éteinte dans ma tête et je ne pouvais pas croire que cela fonctionnait, c’était tellement simple et évident.

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
min-width:100%;
min-height:100%;
}

Réglez simplement min-width et min-height à 100% et il sera toujours automatiquement redimensionné pour s’adapter au div, coupant ainsi le surplus d’image. Pas de muss pas de chichi.

0
outendesigns

L'utilisation d'une image en tant qu'arrière-plan Div présente de nombreux inconvénients (par exemple, l'absence d'ALT pour le référencement). Au lieu de cela, utilisez object-fit: cover; dans le style de balise d'image!

0
Mehdi Saghari

Nous avons suivi le chemin avec une application angulaire consistant à utiliser une variante de l'approche jQuery ci-dessus. Ensuite, un de nos brillants collègues a proposé une approche purement CSS. Voir cet exemple ici: https://jsfiddle.net/jeffturner/yrrncees/1/ .

En gros, utiliser line-height a résolu le problème pour nous. Pour ceux qui ne veulent pas frapper le violon, les fragments de code sont les suivants:

.container {
    margin: 10px;
    width: 125px;
    height: 125px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

La clé consiste à utiliser line-height et à définir le conteneur pour qu'il en fasse de même.

0
Jeff Turner

La solution suivante est très courte et propre si vous devez insérer une balise img dans une balise div:

.container, .container img 
{
	max-height: 300px;
	max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>

<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-Shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>

De plus, si vous n'avez pas besoin d'utiliser une div, vous pouvez simplement écrire un css encore plus court:

 img
    {
        max-height: 300px;
        max-width: 240px;
    }
0
willy wonka

Voici une autre solution que j'ai trouvée, qui évite d'avoir à séparer le portrait, le paysage ou les scripts. 

  <div class="container">
    <img src="http://placehold.it/500x500" class="pic" />
  </div>

CSS

.container{
  position: relative;
  width: 500px;
  height: 300px;
  margin-top: 30px;
  background: #4477bb;
}
.pic{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

Ça y est, ça marche bien ...

https://jsfiddle.net/efirat/17bopn2q/2/

0
efirat