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

Imágen de perfil
Val: 561
Oro
Ha aumentado 1 puesto 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

estrellaestrellaestrellaestrellaestrella(4)
Actualizado el 22 de Octubre del 2019 por Scriptshow (Publicado el 5 de Marzo del 2017)
18.326 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(4)

Actualizado el 4 de Abril del 2017 (Publicado el 5 de Marzo del 2017)gráfica de visualizaciones de la versión: 1.0
18.327 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 (4)

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

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3888