Diseñar imágenes en CSS funciona exactamente de la misma manera que diseñar cualquier elemento usando el modelo de caja de relleno, bordes y márgenes para el contenido. Hay muchas maneras de establecer el estilo en las imágenes que se enumeran a continuación:
- Imágenes en miniatura
- Imágenes redondeadas
- Imágenes receptivas
- Imagen transparente
- centrar una imagen
Discutiremos todas las formas de diseñar la imagen secuencialmente y también las entenderemos a través de los ejemplos.
Imágenes en miniatura: la propiedad de borde se utiliza para crear imágenes en miniatura.
Ejemplo: Este ejemplo ilustra el uso de la propiedad Estilo de imagen para crear las imágenes en miniatura.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Thumbnail image</title>
<style>
img {
border: 1px solid black;
border-radius: 5px;
padding: 5px;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="thumbnail-image"
style="width:400px">
</body>
</html>
Producción:
Propiedad Border-radius: La propiedad border-radius se utiliza para establecer el radio de la imagen del borde. Esta propiedad puede contener uno, dos, tres o cuatro valores. Es la combinación de cuatro propiedades: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.
Ejemplo: Este ejemplo ilustra el uso de la propiedad Estilo de imagen para crear imágenes redondeadas.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/forkandgeeksclassesV-min.png"
alt="rounded-image"
width="400"
height="400">
</body>
</html>
Producción:
Imágenes receptivas: la imagen receptiva se utiliza para ajustar la imagen automáticamente al cuadro especificado.
Ejemplo: Este ejemplo ilustra el uso de la propiedad Estilo de imagen para crear imágenes receptivas.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Responsive-image"
width="1000"
height="300">
</body>
</html>
Producción:
Imagen transparente: la propiedad de opacidad se utiliza para establecer la imagen transparente. El valor de opacidad se encuentra entre 0,0 y 1,0.
Ejemplo: Este ejemplo ilustra el uso de la propiedad Estilo de imagen para crear imágenes transparentes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>style image</title>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Transparent-image"
width="100%">
</body>
</html>
Producción:
Centrar una imagen: las imágenes se pueden centrar en el cuadro utilizando las propiedades de margen izquierdo y margen derecho.
Ejemplo: Este ejemplo ilustra el uso de la propiedad Estilo de imagen para colocar la imagen en el centro.
HTML
<!DOCTYPE html>
<html>
<head>
<title>style image</title>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="centered-image"
style="width:50%">
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con Styling Images se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Chandu_Siddartha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA