Lorsque j'insère une image dans un conteneur dont la largeur et la hauteur sont fixes, l'image s'étire pour s'adapter à cet espace. Y at-il un moyen d'afficher l'image à sa taille normale, mais avec l'excès coupé?Rogner une image au lieu de l'étirer
Afficher comme une image de fond
<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>
Ensuite, dans la DIV ci-dessus, vous pouvez jouer avec CSS
pour créer différents effets de la culture.
Utiliser ce: http://www.w3schools.com/css/pr_background-position.asp
-position de fond: 5px 5px;
puis régler la hauteur et la largeur de la div
hauteur: 55px;
largeur: 55px;
Vous pouvez utiliser le CSS clip propriété:
#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
L'inconvénient de l'utilisation clip est que l'élément doit être placé de façon absolue, et est disponible uniquement avec la forme « rect ».
Voir:
La façon moderne est d'utiliser object-fit: none; (ou object-fit: cover; plus commune si vous voulez à l'échelle, mais sans étirement).
img {
object-fit: cover;
}
74% des navigateurs soutenir ce que de 2016 novembre - Can I use?