Crayons with different height

CSS: recortar el ancho o el alto de una imagen solo con CSS

Puedes recortar imágenes con un par de líneas de CSS sin usar Photoshop ni otras herramientas de edición. Esto es útil cuando las miniaturas de una composición de varias columnas tienen alturas diferentes, como abajo.

ANTES

thumbnail image before

Las alturas desiguales de las miniaturas pueden desajustar fácilmente toda la estructura.

CSS

Copia el código de abajo y pégalo en tu archivo CSS.

img {
    height: 200px;
    object-fit: cover;
}

Prueba object-position: 10% 10%; si quieres cambiar la posición de la imagen dentro de su área.

DESPUÉS

thumbnail image after

Tus 20 o 30 miniaturas encajarán perfectamente y la composición dejará de verse desordenada. Puedes usar este método con cualquier imagen individual de tu página web.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *