Comment émuler background-size: cover sur <img>?
Comment puis-je redimensionner et repositionner l'image à l'intérieur d'une zone, de telle sorte qu'il couvre l'ensemble de la zone, de la même façon background-size: cover
œuvres.
<div class="box" style="width: 100px; height: 100px;">
<img src="pic.jpg" width="413" height="325">
</div>
Je sais que je dois ajouter overflow:hidden
de la boîte et de l'image doit position: absolute
. Mais quelle est la formule qui me met le nouveau droit de la taille de l'image et gauche + haut positions?
$('.box').each(function(i) { $(this).children('img:first').height($(this).height()).width($(this).width()).css({ position: 'absolute', top: 0, left: 0 }); })
- c'est le même que
background: 100% 100%
, pasbackground-size: cover
- Ne vous voulez que l'image soit centrée aussi bien ou juste assez grand? Je suis à la recherche de cet exemple qui n'est pas le centre de l'image. w3schools.com/cssref/...
- pas vraiment sûr de ce que vous voulez que la couverture est intrinsèque à l'arrière-plan de positionnement. cela semble un peu mal à la gesticulation pour un intérieur élément img, mais je suppose que vous pourriez essayer une formule exacte, mais je ne suis pas sûr que la formule de moi-même
- oui. mon erreur alors. Je pensais que le fond de la taille de la couverture du centre de l'image ainsi 😛 (peut-être background-position: center est nécessaire de trop?)
- Je crois que le paramètre center ne fonctionne que si l'image est plus petite que le conteneur. Si votre image est deux fois la taille du conteneur, ça va encore être positionné à l'angle supérieur gauche.
Vous devez vous connecter pour publier un commentaire.
cela peut être plus facile
jQuery
css
Ce doit gérer toute taille et de l'orientation, et pas seulement redimensionner, mais compensé les images. Le tout sans
relative
ouabsolute
positionnement.fait un violon: http://jsfiddle.net/filever10/W8aLN/
el
et vous pouvez affecter plusieurs, c'est à dire.var el = $(this).children('.box');
line 28
doit être mis à jour en tant que bien de$(this).siblings('.box');
à$(this).siblings('ul').children('.box');
il est mentionné que dans les commentaires sur cette ligne... "//définition de l'élément par rapport à l'action". Le bouton est juste une représentation générale pour réaliser une action qui a déclenché le changement, vous pouvez le faire$('.nedmnthnguwnt')
pour que l'événement puisse se produire. jsfiddle.net/filever10/jnrsrcr3object-fit: cover
qui n'est pas pris en charge dans la plupart des versions de IE. Montrer un exemple de ce que tu veux dire.Pour ce qu'elle vaut: il peut maintenant être fait avec CSS seul avec...
La nouvelle propriété CSS object-fit (Actuelle de la prise en charge du navigateur)
Juste mis
object-fit: cover;
sur leimg
Vous n'avez même pas besoin de mettre la
img
dans undiv
!VIOLON
CSS:
HTML:
Vous pouvez en savoir plus sur cette nouvelle propriété dans cette webplatform article.
Aussi, ici, est un violon à partir de l'article ci-dessus qui montre toutes les valeurs de la
object-fit
propriété.Assez proche, pur CSS solution pour le fond de la taille de la couverture de la simulation à l'aide de la balise img avec une très bonne prise en charge du navigateur (IE8+):
CSS:
HTML:
Aussi pour ce que ça vaut, le même effet peut être produit par la place du paramètre "width" et "height" (réglage d'entre eux pourrait casser cette approche btw):
min-width: 100%;
min-height: 100%;
ou
min-width: (your desired percent of viewport width)vw;
min-height: (your desired percent of viewport height)vh;
avec
overflow: hidden;
sur le parent
🙂
L'idée est de faire d'autres wrapper pour les images:
HTML:
Et utiliser le CSS:
HTML:
C'est un exemple fonctionnel: https://jsfiddle.net/kr60jroe/
De https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
Donc, soit vous êtes à la recherche à la prise de la
width: 100%
ou laheight: 100%
, selon la volonté de créer un chevauchement au sein du parentdiv
. Nous pouvons donc utiliser la logique suivante:La suite de violon montre cette fonction de travail à la fois horizontale et verticale de l'image.
http://jsfiddle.net/2r5Cb/
background-size: cover
serait?background-size: cover
n'est pas le centre de l'image. Si vous regardez mon jsfiddle, vous verrez que j'ai inclusbackground-size: cover
de comparaison des images de montrer que cette fonction crée une reproduction à l'identique.Voici ma démarche:
VIOLON
Lors de la lecture de la accepté de répondre, il me semble que nous avons tout simplement tester si l'image est "portrait" ou "paysage":
Dans le cas de l'OP, c'est le droit. Mais d'autres pourraient être aux prises avec des rectangles et devrait prendre le ratio d'aspect de l'enceinte et l'enfant-image en considération:
C'est un pur css solution. Vous pouvez définir un wrapper avec:
et le img:
Ici l'exemple vivant:
http://codepen.io/ErwanHesry/pen/JcvCw
.box
). Cela permettra de faire une image de grandir pour s'adapter à son conteneur, mais ne pas le faire ajuster à son conteneur.Vous pouvez utiliser ce style pour la balise d'image :"object-fit:couverture;"
Ce lien va vous soutenir aussi https://css-tricks.com/almanac/properties/o/object-fit/
Voici un propre fonction JavaScript pour faire cela, et un exemple de mise en œuvre:
Voici un exemple de mise en œuvre:
HTML
CSS
JavaScript
Si vous voulez que l'image sera centrée dans la boîte, sans redimensionnement de l'image, il suffit d'utiliser ce code:
Si vous êtes à la recherche pour redimensionner l'image pour l'adapter, utiliser le code suivant:
Ce code permet de laisser de l'espace blanc si l'image est plus large que haute. Si aucune de ces travaux, vous pouvez simplement définir l'image comme arrière-plan et utiliser
background-size: cover;
.Pour toute personne qui arrive dans cette réponse que j'ai fait aujourd'hui la recherche d'une solution qui fonctionne avec le paysage, portrait, rectangle, carré, etc les images et l'arbitraire de la taille des contenants, j'ai inclus dans mon propre code ci-dessous.
Cela permettra également de travailler de manière responsable, vous aurez juste besoin de l'exécuter à nouveau chaque fois que la fenêtre est redimensionnée.
JSFiddle:
http://jsfiddle.net/66c43ao1/
HTML
CSS
JS
Vous pouvez bien sûr utiliser des bibliothèques telles que Backstretch qui faire la même chose, mais j'ai trouvé cette solution pour être mieux à mes besoins (pas d'augmentation dans les dépendances, un poids plus léger, etc).
J'ai créé une fonction ci-dessous qui devrait le faire. J'ai emprunté un peu de la logique de la accepté de répondre à et ajusté pour qu'il fonctionne avec n'importe quel conteneur par la création d'un ratio de l'image dimension : conteneur de dimension et ensuite comparé ce qui est supérieur à la figure dimension pour l'ajuster. Également ajouté un 'centre' argument ('true' centres, faux il définit à haut/gauche).
Je suis en utilisant CSS3 avec la translateX/Y, mais pourrait le faire fonctionner sans assez facilement.
Voici le code:
et la caisse de la jsfiddle pour la voir en action: https://jsfiddle.net/cameronolivier/57nLjoyq/2/
J'ai fait quelque chose d'émuler un background-size:cover et background-position:center.
Si vous souhaitez modifier la position juste modifier les styles "haut" un "gauche" de l'img
CSS
JS
Cette fonction doit être activée sur "charger" et "redimensionner" de l'événement.