Código de CSS - Centrar y Ajustar Imagen con métodos básicos de CSS

Imágen de perfil
Val: 593
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Centrar y Ajustar Imagen con métodos básicos de CSSgráfica de visualizaciones


CSS

Actualizado el 4 de Octubre del 2020 por Scriptshow (138 códigos) (Publicado el 5 de Marzo del 2017)
23.457 visualizaciones desde el 5 de Marzo del 2017
Como centrar una imagen en cualquier dispositivo / pantalla de modo responsable con CSS compatible; sin pseudo clases, sin media query, sin calcular márgenes, sin importar el tamaño, etc.
El resultado es parecido al de aplicaciones de escritorio cuando redimensionamos la ventana.

Espero sea útil.

Un saludo

Requerimientos

Un navegador web y/o dispositivo compatible.

1.0
estrellaestrellaestrellaestrellaestrella(7)

Actualizado el 4 de Abril del 2017 (Publicado el 5 de Marzo del 2017)gráfica de visualizaciones de la versión: 1.0
23.458 visualizaciones desde el 5 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

imagen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style type="text/css">
<!--
.img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
//-->
</style>
</head>
<body>
<img class="img" src="imagen.jpg">
</body>
</html>



Comentarios sobre la versión: 1.0 (7)

Imágen de perfil
6 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
Facil, facil!!!
Responder
Imágen de perfil
7 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
Muy bien
Responder
5 de Julio del 2019
estrellaestrellaestrellaestrellaestrella
perdón por mi ignorancia, pero donde bajo el archivo css?

esta es la ruta donde hay que guardarlo? <style type="text/css">

gracias. sdos.
Responder
Jack
9 de Agosto del 2019
estrellaestrellaestrellaestrellaestrella
No amigo, eso es para indicar el tipo nada mas, no es un archivo, solo agregalo.
Responder
Daniela Maria
23 de Junio del 2020
estrellaestrellaestrellaestrellaestrella
Hola Excelente me sirvió Muchísimo, lo utilice así en mi R markdown :

<img src="URl imagen o repositorio donde se encuentra" style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;max-width: 100%;max-height: 100%;"/>
Responder
Imágen de perfil
13 de Septiembre del 2020
estrellaestrellaestrellaestrellaestrella
No me funciono la imagen se contorsiona pero no se vuelves reponsive..
Responder
Angel Paz
17 de Enero del 2021
estrellaestrellaestrellaestrellaestrella
Hola. Deseo formular una pregunta. Estoy aprendiendo HTML y CSS de manera autodidacta, siguiendo y aplicando lecciones de internet, así como ésta. Estoy intentando centrar una imagen en medio de un texto, aplicando una regla CSS, pero me arroja los siguientes problemas: 1.- Interrumpe el texto en el sitio exacto donde la pongo. 2.- No mantiene espacios izq. derecho, arriba, abajo, afectando su elegancia y quedando pegado al texto. 3.- Lo peor: en lugar de intercalarse "en" el texto, se interpuso "sobre" el texto tapándolo. Quisiera sus buenos oficios para mejorar el código que seguidamente expongo, y que igual que yo, otros lectores sabrán darle la utilidad que corresponde. De antemano gracias. El código es:
<style>
figure
{
text-align:center;
text-decoration:none;
margin:0;
padding:0;
font-size;16px;
position: absolute;
margin-left: 16em;
}

</style>

El texto simulado de ejemplo es:



1
2
3
4
5
<p> ADVERTENCIA: ESTE ES UN TEXTO DISEÑADO ÚNICA Y EXCLUSIVAMENTE<figure><img alt="CICERON" border="0" data-original-height="264" data-original-width="168"   style="display: block; padding: 1em 0; text-align: center; "   src="https://1.bp.blogspot.com/-quYBtPXge6Q/YARI7yJKd-I/AAAAAAAABbU/iEsCoq0cgtcQMosY2Utlg85Jcot3Sl7AgCLcBGAsYHQ/s0/Ciceron.PNG"/></figure> CON EL PROPÓSITO ESPECÍFICO DE SERVIR DE  EJEMPLO DE APLICACIÓN, PARA REALIZAR PRUEBAS DE CENTRADO DE IMAGEN DENTRO DE UN TEXTO RECURRIENDO AL EMPLEO DE REGLAS DE CSS, BUSCANDO  INTERCALARSE DENTRO DEL MISMO, ES DECIR,SIN TAPAR EL TEXTO DEL SEGMENTO DONDE SE INSERTA LA IMAGEN. CARECE POR TANTO DE CUALQUIER INTERÉS SEMÁTICO QUE NO SEA EL EXPUESTO. GRACIAS. </p>
 
<p>  ADVERTENCIA: ESTE ES UN TEXTO DISEÑADO ÚNICA Y EXCLUSIVAMENTE CON EL PROPÓSITO ESPECÍFICO DE SERVIR DE  EJEMPLO DE APLICACIÓN, PARA REALIZAR PRUEBAS DE CENTRADO DE IMAGEN DENTRO DE UN TEXTO RECURRIENDO AL EMPLEO DE REGLAS DE CSS, BUSCANDO  INTERCALARSE DENTRO DEL MISMO, ES DECIR, SIN TAPAR EL TEXTO DEL SEGMENTO DONDE SE INSERTA LA IMAGEN. CARECE POR TANTO DE CUALQUIER INTERÉS SEMÁTICO QUE NO SEA EL EXPUESTO. GRACIAS. </p>
 
<p>  ADVERTENCIA: ESTE ES UN TEXTO DISEÑADO ÚNICA Y EXCLUSIVAMENTE CON EL PROPÓSITO ESPECÍFICO DE SERVIR DE  EJEMPLO DE APLICACIÓN, PARA REALIZAR PRUEBAS DE CENTRADO DE IMAGEN DENTRO DE UN TEXTO RECURRIENDO AL EMPLEO DE REGLAS DE CSS, BUSCANDO  INTERCALARSE DENTRO DEL MISMO, ES DECIR, SIN TAPAR EL TEXTO DEL SEGMENTO DONDE SE INSERTA LA IMAGEN. CARECE POR TANTO DE CUALQUIER INTERÉS SEMÁTICO QUE NO SEA EL EXPUESTO. GRACIAS. </p>

Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3888