proporcional - Redimensionar automáticamente las imágenes con el tamaño del navegador usando CSS
css tamaño imagen proporcional (4)
Para hacer que las imágenes sean flexibles, simplemente agregue
max-width:100%yheight:auto.max-width:100%imagenmax-width:100%yheight:autofunciona en IE7, pero no en IE8 (sí, otro error raro de IE). Para solucionar esto, necesita agregarwidth:auto/9para IE8.fuente: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
por ejemplo :
img {
max-width: 100%;
height: auto;
width: auto/9; /* ie8 */
}
y luego cualquier imagen que agregue simplemente usando la etiqueta img será flexible
JSFiddle ejemplo aquí. No se requiere JavaScript Funciona en las últimas versiones de Chrome, Firefox e IE (que es todo lo que he probado).
Quiero que todas (o solo algunas) de mis imágenes cambien de tamaño automáticamente cuando cambie el tamaño de la ventana de mi navegador. He encontrado el siguiente código, aunque no hace nada.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="icons">
<div id="contact">
<img src="img/icon_contact.png" alt="" />
</div>
<img src="img/icon_links.png" alt="" />
</div>
</body>
</html>
CSS
body {
font-family: Arial;
font-size: 11px;
color: #ffffff;
background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
background-size: cover;
}
#icons {
position: absolute;
bottom: 22%;
right: 8%;
width: 400px;
height: 80px;
z-index: 8;
transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-webkit-transform: rotate(-57deg);
-moz-transform: rotate(-57deg);
}
#contact {
float: left;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
¿Cómo puedo tener básicamente un diseño de pantalla completa (con background-size: cover pantalla background-size: cover ) y tener elementos div exactamente en la misma posición (% sabia) al cambiar el tamaño de la ventana del navegador, con su tamaño también cambiando el tamaño (como la cover está haciendo para el fondo) ?
Esto puede ser una respuesta demasiado simplista (todavía soy nuevo aquí), pero lo que he hecho en el pasado para remediar esta situación es averiguar el porcentaje de la pantalla que me gustaría que tome la imagen. Por ejemplo, hay una página web en la que estoy trabajando en la que el logotipo debe ocupar el 30% del tamaño de la pantalla para que se vea mejor. Jugué y finalmente probé este código y me ha funcionado hasta ahora:
img {
width:30%;
height:auto;
}
Dicho esto, esto cambiará todas las imágenes para que sean el 30% del tamaño de la pantalla en todo momento. Para evitar este problema, simplemente conviértalo en una clase y aplíquelo a la imagen que desea que sea al 30% directamente. Aquí hay un ejemplo del código que escribí para lograr esto en el sitio mencionado anteriormente:
la porción de CSS:
.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}
la porción de HTML:
<img src="logo_001_002.png" class="logo">
Alternativamente, podría colocar cualquier imagen que espere cambiar automáticamente el tamaño en un div propio y usar la opción de etiqueta de clase en cada div (creando ahora etiquetas de clase cuando sea necesario), pero siento que eso ocasionaría mucho trabajo extra eventualmente. Pero, si el sitio lo requiere: el sitio lo requiere.
Espero que esto ayude. ¡Que tengas un gran día!
Lo siguiente funciona en todos los navegadores para mis 200 figuras, para cualquier porcentaje de ancho, a pesar de ser ilegal. Jukka dijo ''Úselo de todos modos''. (La clase simplemente flota la imagen hacia la izquierda o hacia la derecha y establece los márgenes.) ¡No puedo imaginar por qué este no es el enfoque estándar!
<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />
Cambie el ancho de la ventana y la imagen se escalar amablemente.
contenedor de imagen
Escalar imágenes usando el truco anterior solo funciona si el contenedor en el que están las imágenes cambia de tamaño.
El contenedor #icons utiliza valores de px para el ancho y alto. px valores de px no se escalan cuando se cambia el tamaño del navegador.
Soluciones
Use uno de los siguientes enfoques:
- Defina el ancho y / o alto usando
%values. - Use una serie de consultas
@mediapara establecer el ancho y el alto en diferentes valores según el tamaño de pantalla actual.