El objeto de ajuste en la propiedad CSS

CSS | ajuste a objetos propiedad : Aquí, vamos a aprender sobre la ajuste a objetos propiedad con la sintaxis, ejemplos de CSS (Cascading Style Sheet).

CSS | Propiedad a objetos ajuste

Introducción:

vídeos e imágenes están seguros de que cualquier página web o en la web atractivo para los usuarios. Es muy inteligente para imágenes class y vídeos en su sitio web o página web, ya que hace que su página web o web muy sensible y el usuario interactivo. Aunque, es una buena práctica para disfrutar de sus usuarios con los videos e imágenes para hacer frente a esas imágenes y vídeos es igualmente importante.

Por lo tanto, para hacer frente a esas imágenes y vídeos, hay ciertas propiedades y uno debe seguir aprendiendo sobre estas nuevas propiedades, por lo tanto, este artículo también se trata de uno de esos propiedad conocida como Propiedad ajuste a objetos en el CSS . Vamos a echar un vistazo a la siguiente explicación include mejor comprensión.

Definición:

El CSS ajuste a objetos propiedad se utiliza para declarar cómo una imagen o vídeo cambia de tamaño para ajustarse a su área requerida. Muy simple y fácil de usar la propiedad, pero deben usarse con mucha sabiduría también.

Sintaxis:

    Element{
object-fit : fill|contain|cover|scale-down|none;
}

Hay siguientes valores de propiedad ajuste a objetos en CSS,

  • llenar
  • contener
  • cubierta
  • escala descendente
  • ninguno

Echemos un vistazo a cada una propiedad por uno ….

objeto de ajuste: relleno

también es el valor for. La imagen o vídeo sustituido se estira o se aplastan para adaptarse a la superficie necesaria en caso de necesidad. La imagen reemplazado llenará los negligentes zona de su relación de aspecto.

Sintaxis:

    Element{
object-fit : fill;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 400px;
object-fit: fill;
}
</style>
</head>
<body>
<h1>Object-fit Property</h1>
<img src="img_forest.jpg" width="667" height="184">
</body>
</html>

salida

The object-fit Property in CSS - 4

En el ejemplo anterior, la imagen sustituido se estira con el fin de adaptarse a la caja de contenido.

objeto de ajuste: contener

El contienen valor del ajuste a objetos propiedad se utiliza para escalar el contenido reemplazado para mantener su relación de aspecto mientras se ajusta en un contenido-box elementos. El objeto completo se hace para llenar la caja de contenido.

Sintaxis:

    Element{
object-fit : contain;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<h1>Object-fit Property</h1>
<img src="img_forest.jpg" width="667" height="184">
</body>
</html>

salida

The object-fit Property in CSS - 5

En el ejemplo anterior, la imagen sustituido se escala para mantener su relación de aspecto.

objeto de ajuste: cubierta

El valor cubierta del ajuste a objetos propiedad se utiliza para cambiar el tamaño del contenido reemplazado para mantener su relación de aspecto mientras se llena el cuadro de contenido.

Si la relación de aspecto de objeto no coincide con la relación de aspecto de la caja del objeto se recorta a la medida.

Sintaxis:

    Element{
object-fit : cover;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<h1>Object-fit Property</h1>
<img src="img_forest.jpg" width="667" height="184">
</body>
</html>

salida

The object-fit Property in CSS - 6

En el ejemplo anterior, la imagen sustituido se ajusta el contenido de la caja perfectamente por lo que se no recortada .

objeto de ajuste: escala descendente

Como su nombre indica en el escala descendente valor de la propiedad objeto de ajuste el contenido reemplazado cambia de tamaño como si el ninguno o contienen han sido especificados y resultados al más pequeño tamaño del objeto.

Sintaxis:

    Element{
object-fit : scale-down;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h1>Object-fit Property</h1>
<img src="img_forest.jpg" width="667" height="184">
</body>
</html>

salida

The object-fit Property in CSS - 7

En el ejemplo anterior, la imagen sustituido se escala como si ninguno.

objeto de ajuste: ninguno

Como su nombre indica en el valor ninguno de la propiedad ajuste a objetos el contenido sustituido ignorará relación de aspecto de la imagen real. Por lo tanto, no se cambia el tamaño.

Sintaxis:

    Element{
object-fit : none;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 400px;
object-fit: none;
}
</style>
</head>
<body>
<h1>Object-fit Property</h1>
<img src="img_forest.jpg" width="667" height="184">
</body>
</html>

salida

The object-fit Property in CSS - 8

En el ejemplo anterior, la imagen reemplazado ha ignorado toda la relación de aspectos.


Deja un comentario

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