Consulte también Plantilla:Recorte de imagen CSS fácil , que simplifica un poco la interfaz de esta plantilla.
{{ CSS image crop }} crea un recorte de una imagen en línea para obtener una vista previa del aspecto de una página o para vincularla a imágenes completas cuando se prefiere un recorte leve en un artículo, pero la imagen completa es más enciclopédica en general. Cuando solo se utiliza una pequeña sección de la imagen después del recorte, es mejor cargar el recorte como un archivo nuevo para evitar enviar datos de imagen adicionales a los usuarios.
Nota: Hubo un problema técnico anterior por el cual algunas personas tuvieron que usar "tleft", "tright", etc. como solución alternativa porque "left" y "right" no funcionaban. Como resultado, para evitar tener que corregir todas las páginas que usaban la solución alternativa, la plantilla se diseñó para que funcione correctamente independientemente de si se usa "tright" o "right". Consulte la sección de discusión de plantillas para obtener más detalles.
.svg/1280px-Test_Template_Info-Icon_-_Version_(2).svg.png){kind=icon}
{{ CSS image crop | Image = El nombre del archivo de imagen, o puede aceptar {{ Annotated image }} . | bSize = El ancho de la imagen base en píxeles (la imagen que estamos recortando) | cWidth = Ancho de la imagen recortada en píxeles | cHeight = Alto de la imagen recortada en píxeles | oTop = Desplazamiento superior en píxeles, opcional y el valor predeterminado es 0 cuando se omite | oLeft = Desplazamiento izquierdo en píxeles, opcional y el valor predeterminado es 0 cuando se omite | Location = 'derecha', 'izquierda', 'centro' o 'ninguno'. Determina la ubicación de la imagen en la página El valor predeterminado es "derecha" cuando se proporciona una descripción (como es el valor predeterminado para las imágenes en miniatura) Cuando la descripción está en blanco, la ubicación se muestra a la izquierda (como es predeterminado para los que no son miniaturas)| Descripción = Descripción (se mostrará usando la clase miniatura) | Enlace = Nombre de un artículo al que se vinculará haciendo clic en la imagen (omitir a menos que haya una buena razón para hacer un enlace a un artículo en lugar de a la imagen).| Alt = El texto alternativo de la imagen. | Page = La página del archivo, si hay varias páginas (como en los archivos PDF). | magnify-link = La imagen que se vinculará mediante el ícono de ampliación (utilícelo si el parámetro Image está configurado en {{ Annotated image }} o si el parámetro Link lleva a algo distinto a la imagen). }}Crea una imagen recortada de una sola gota de agua:
oTopy oLeftdefine la esquina superior izquierda de la imagen recortadacWidthy cHeightdefine el tamaño de la imagen recortadabSize{{ CSS image crop | Imagen = Rocío sobre la hierba Luc Viatour.jpg | bSize = 400 | cWidth = 100 | cHeight = 100 | oTop = 180 | oLeft = 60 }}Además, la imagen recortada puede tener un texto de título y posicionarse en la página:
Location=para posicionar ( centro, derecha, izquierda, ninguna )Description=para agregar un texto al título{{ CSS image crop | Image = Rocío sobre la hierba Luc Viatour.jpg | bSize = 400 | cWidth = 100 | cHeight = 100 | oTop = 180 | oLeft = 60 | Location = center | Description = Una gota de rocío sobre la hierba (foco en la gota) }}Se pueden organizar grupos de imágenes recortadas en un marco de imagen :
.jpg/1280px-Aaron_Burden_2017-05-03_(Unsplash).jpg)
{{ Marco de imagen | alinear = centro | borde = no | título = Imágenes recortadas en un marco | contenido = {{ pila |{{ Recorte de imagen CSS | Imagen = Aaron_Burden_2017-05-03_(Unsplash).jpg | bSize = 400 | cWidth = 100 | cHeight = 100 | oTop = 180 | oLeft = 60 }} |{{ Recorte de imagen CSS | Imagen = Rocío sobre hierba de limón - Jardines Shola - Kotagiri.jpg | bSize = 400 | cWidth = 100 | cHeight = 100 | oTop = 180 | oLeft = 60 }} }} {{ pila |{{ Recorte de imagen CSS | Imagen = Rocío sobre hierba Luc Viatour.jpg | bSize = 400 | cWidth = 100 | cHeight = 100 | oTop = 180 | oIzquierda = 60 }} |{{ Recorte de imagen CSS | Imagen = Rocío y hierba - Flickr - Stiller Beobachter.jpg | Tamaño b = 400 | Ancho c = 100 | Alto c = 100 | Superior = 180 | Izquierda = 60 }} } } }}El script de usuario User:BrandonXLF/CSSImageCrop se puede utilizar para generar código para utilizar esta plantilla con una interfaz de usuario interactiva.