Centrer l'image avec la taille forcée sans l'étirer

Dans une division environnante, je souhaite centrer une image. Cette image devrait avoir une taille forcée mais sans étirement. Donc, si le conteneur div est 100px * 100px et l'image 200px * 200px, 50px doit être recadrée de chaque côté.Centrer l'image avec la taille forcée sans l'étirer

Dans this question vous pouvez lire comment forcer la taille. Mais je ne veux pas que l'image commence en bas à gauche mais au centre. Telle est la question :)

Voici comment il est:

enter image description here

Et voilà comment je veux que ce soit:

enter image description here

Source

2012-01-04 caw

Donne à l'image une marge gauche négative. Dans cet exemple, margin-left:-50px. Editer: Ou si vous ne connaissez pas la largeur de l'image, vous pouvez utiliser l'image comme arrière-plan pour la div.

<div style="margin:0 auto; width:100px; height:100px; border:2px solid black; 
    background:url(yourimagehere) 50% 0 no-repeat"> 
</div>

Source

2012-01-04 13:21:44

Si je définis une marge, je dois connaître la largeur de la image. C'est ce que je n'ai pas, chaque image a une taille individuelle. Et la valeur de la marge doit être calculée pour chaque image. – caw

Hm. Tu ne peux pas utiliser l'image comme arrière-plan pour la div? Avec CSS, vous pouvez placer l'arrière-plan partout où vous voulez dans la div. Attends, je vais éditer ma réponse. –

Oh, c'est de ma faute. Votre réponse semble être la parfaite maintenant. Mais cela ne marche pas pour moi - ce qui est seulement parce que je ne vous ai pas donné toutes les informations. Votre réponse est parfaite pour la question. Mais j'ai oublié de dire que l'image a également été redimensionnée en HTML: Quand la largeur réelle était de 200 je l'ai incluse dans le HTML avec caw

This pourrait être ce dont vous avez besoin?

Source

2012-01-04 13:15:44 Madcowswe

Cette propriété est vraiment intéressante, merci! Mais j'ai besoin de connaître la taille de l'image, non? – caw

@MarcoW. Essayez d'utiliser%, comme dans [this] (http://www.w3schools.com/cssref/playit.asp?filename=playcss_left&preval=-10%25) exemple – Madcowswe

Ceci fonctionne même si l'orientation du conteneur ne correspond pas à l'orientation de l'image (portrait/paysage). Le zoom(0.1) et min-width/height:1000% signifie que cela fonctionne si la taille de l'image est jusqu'à 10 fois celle du conteneur cible, je suppose que vous devez dessiner une ligne quelque part: (http://jsfiddle.net/FYnCG/). Le bit d'animation est juste un test, si vous voulez, de sorte que vous voyez comment il évolue lorsque la hauteur devient le facteur limitant.

<DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
    width: 100px; 
    height: 30px; 
    border: 1px solid black; 
    overflow:hidden; 
    position:relative; 
    transititon: width 5s, height 8s; 
} 
.container img { 
    position: absolute; 
    left:-10000%; right: -10000%; 
    top: -10000%; bottom: -10000%; 
    margin: auto auto; 
    min-width: 1000%; 
    min-height: 1000%; 
    -webkit-transform:scale(0.1); 
    transform: scale(0.1); 
} 
.container:hover { 
    width: 800px; 
    height: 800px; 
    transition: width 5s, height 8s; 
} 
</style> 
</head> 
<body> 
    <div class="container"> 
    <img 
     src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
     /> 
    <!-- 366x200 --> 
    </div> 
</body> 
</html>

Source

2014-05-25 18:11:55

Centrer l'image avec la taille forcée sans l'étirer

Répondre

Questions connexes