Cómo recortar una imagen usando CSS
Este artículo discutirá:
- Método 1: Cómo recortar una imagen a través de la propiedad "Desbordamiento: oculto"?
- Método 2: Cómo recortar una imagen a través de la propiedad de "imagen de fondo"?
- Método 3: Cómo recortar una imagen a través de las propiedades de "posición de objeto" y "ajuste de objetos"?
Requisito previo: Crear un archivo HTML
Para incrustar una imagen en el documento HTML, siga las instrucciones mencionadas:
- Agrega un ""Etiqueta para crear una división y asignarlo una clase"IMG-CROP-DIV". Implementar el "estilo"Atributo para establecer el elemento"margen" propiedad.
- Luego, utilice la etiqueta HTML con los atributos "SRC", "Ancho" y "Altura" para incrustar una imagen en el documento.
- El "SRC"El atributo establece la URL de origen.
- El "ancho"Define el ancho de la imagen.
- El "altura"Determina la altura de la imagen.
Html
Se puede observar que hemos agregado con éxito la imagen a nuestra página web:
Método 1: Cómo recortar una imagen a través de la propiedad "Desbordamiento: oculto"?
Cuando el contenido del elemento es demasiado grande para caber dentro del área designada, el "DesbordamientoLa propiedad se define para agregar barras de desplazamiento. Además, también se puede utilizar para recortar la imagen adicional.
Para una mejor comprensión, diseñemos nuestro contenedor.
Clase de estilo "img-crap-div"
.IMG-CROP-DIVAncho: 200px;
Altura: 150px;
desbordamiento: oculto;
El ".IMG-CROP-DIV"Se define para acceder a la clase"IMG-CROP-DIV". El "altura" y "anchoLas propiedades de CSS se utilizan para asignar el área de imagen. Luego, el área restante se recorta utilizando el "Desbordamiento"Propiedad CSS junto con el valor"oculto".
Producción
Ajustar la posición de la imagen recortada
Ahora, veremos cómo ajustar la posición de la imagen:
.img-crop-div imgmargen: -75px 0 0 -100px;
Utilizando el "margen"La propiedad con los valores especificados para la parte superior, derecha, izquierda e inferior nos ayudó a ajustar la posición.
Producción
Método 2: Cómo recortar una imagen a través de la propiedad de "imagen de fondo"?
El "imagen de fondoLa propiedad CSS se utiliza para especificar las imágenes de fondo. Sin embargo, una imagen se puede recortar utilizando esta propiedad. Para hacerlo, primero, establezca el ancho y la altura de la imagen que contiene una imagen. Como resultado, la imagen se mostrará dentro del área especificada.
Implementemos el escenario discutido anteriormente en CSS:
.IMG-CROP-DIVAncho: 200px;
Altura: 150px;
IMAGEN DE BUENGE: URL ("/Images/Home-office.jpg ");
Posición de fondo: centro;
Aquí el "posición de fondoSe utiliza la propiedad para ajustar la posición inicial de la imagen.
Producción
Cómo recortar una imagen a través de propiedades de "ajuste de objeto" y "posposición de objetos"?
CSS "ajuste de objetoLa propiedad se puede especificar para recortar imágenes fácilmente. Tiene cinco valores, pero el "cubrir"Es el más apropiado para usar para recortar imágenes.
En CSS, agregue el siguiente fragmento de código para el "IMG-CROP-DIV" clase:
Fit de objeto: cubierta;Posición de objeto: 30% 10%;
Aquí está la descripción de las propiedades dadas:
- Usando el "Fit de objeto: cubierta"Valor de la propiedad, la relación de aspecto de la imagen se mantiene mientras se ajusta al cuadro de contenedores.
- El "posición de objeto"La propiedad establece el área de la imagen para recortar.
Producción
Hemos compilado los métodos para recortar una imagen usando CSS.
Conclusión
Para recortar una imagen en HTML, se pueden utilizar varias propiedades CSS. Las propiedades más utilizadas para las imágenes de recorte son "Desbordamiento" con "ancho" y "altura","imagen de fondo","ajuste de objeto", y "posición de objeto". Esta publicación ha descrito múltiples métodos para recortar una imagen usando CSS.