WILFREDO SALAS G. - Responsive Web Design - Webuda

Recommendations

Info

Sony Ésta es la imagen que queremos mostrar (FIG.8) y de esta forma se verá con el código (FIG.9) FIG.8 Si bien no hay nada malo con la imagen, su tamaño puede causar problemas (1249 × 697) 20 RESPONSIVE WEB DESIGN — Capítulo 3: Imágenes flexibles
FIG.9 Y dio problema. A pesar de que se ve bien dentro del contenedor, la idea de los ejemplos es mostrar tres por línea. Ahora, el elemento img se va a renderizar a cualquier tamaño que se le ocurra, siempre que sea más angosto que el elemento en que se contenga. Pero qué tal si la imagen es más grande que su contenedor, entonces el max-width: 100% fuerza a que el ancho de las imágenes coincidan con el tamaño del contenedor en el que están. (FIG.10) img{ } max-width:100%; 21 RESPONSIVE WEB DESIGN — Capítulo 3: Imágenes flexibles
Page 1 and 2: WILFREDO SALAS G. Responsive Web De
Page 3 and 4: CAPÍTULO 1 Nuestro Mundo Sensible
Page 5 and 6: FIG.2 FIG.1 FIG.1 es el link que se
Page 7 and 8: Desde que este proyecto empezó a e
Page 9 and 10: FIG.3 Un ejemplo de la página web
Page 11 and 12: #titulo h2{ } font-family:meta_seri
Page 13 and 14: #titulo h2{ } font-family:meta_seri
Page 15 and 16: Paso 2 Escribe el código: Aunque e
Page 17 and 18: Paso 4 Aplicar la fórmula: La fór
Page 19: CAPÍTULO 3 Imágenes flexibles HAS
Page 23 and 24: EL PLACER DE ESTAR “OCULTO” Com
Page 25 and 26: @media screen and (min-width: 1024p
Page 27 and 28: 600 px Tablets pequeños, como el A
Page 29 and 30: 1200 px Pantallas anchas (widescree
Page 31 and 32: REPASA LA “MEJORA PROGRESIVA” L

WILFREDO SALAS G. - Responsive Web Design - Webuda

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?