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

Pos: 3

Val: 571

Ha mantenido su posición en CSS (en relación al último mes)

Centrar y Ajustar Imagen con métodos básicos de CSS

CSS

(7)

Actualizado el 4 de Octubre del 2020 por Scriptshow (141 códigos) (Publicado el 5 de Marzo del 2017)

29.206 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
(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

29.207 visualizaciones desde el 5 de Marzo del 2017

<!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)

xve

6 de Marzo del 2017

Facil, facil!!!

Responder

orlando

7 de Abril del 2017

Muy bien

Responder

Maxi

5 de Julio del 2019

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

No amigo, eso es para indicar el tipo nada mas, no es un archivo, solo agregalo.

Responder

Daniela Maria

23 de Junio del 2020

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

jhon

13 de Septiembre del 2020

No me funciono la imagen se contorsiona pero no se vuelves reponsive..

Responder

Angel Paz

17 de Enero del 2021

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:

<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>