Imágenes responsivas con Bootstrap

Clase 32 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Veamos cómo trabajar las imágenes responsive con Bootstrap

Juan Barboza

student•

Mi solución para el problema del tamaño de las imágenes fue ponerle al row la clase align-items-end (v4.0) para que quedaran alineadas hacía abajo y queda bien, aunque no sean del mismo tamaño.

fernando josé pineda trujillo

student•

¡GRACIAS!

Juan Barboza

student•

De nada!

Geraldyn Daniela Chirinos De Sousa

student•

Para imágenes que no son del mismo tamaño, se ve que el titulo sube porque la imagen del medio no tiene el mismo tamaño de las demás…
he visto que lo solucionan agregándole un alto a la imagen. El problema de implementarlo asi es que al cambiar el tamaño de la ventana se distorsiona la imagen porque se le esta dando un alto definido y la clase img-fluid le esta dando un ancho de 100%, lo que hara que en dispositivos menores pierda su relacion…
una forma de que esto no ocurra y alinear al titulo hacia abajo seria usando flexbox asi:

height: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;

Cesar David Ramírez Dimaté

student•

Tú código en la versión 4.1. no aplica. Lo mejor que se puede hacer es definir las 3 imágenes con un tamaño específico (por ejem de 295x305).

Emilio Rafael Hernandez Perez

student•

He visto que muchas personas tiene el fallo de que los títulos no están bien alineados. yo use la misma clase que usamos en el primer vídeo.

le añadí al row la clase flex-items-xs-bottom y me ha funcionado. De esta manera no añadimos mas código y usamos el mismo que nos proporciona bootstrap

<div id="info-container">
      <div class="container">
        <div class="row text-xs-center flex-items-xs-bottom">
          <div class="col-xs-12 col-md-4">
            <img src="images/calidad.png" class="img-fluid" alt="Calidad"> 
            <h4>Calidad</h4>
          </div>
          <div class="col-xs-12 col-md-4">
            <img src="images/envio.png"  class="img-fluid" alt="Envio Gratis">
            <h4>Envío Gratis</h4>
          </div>
          <div class="col-xs-12 col-md-4">
            <img src="images/soporte.png" class="img-fluid" alt="Soporte 24hs">
            <h4>Soporte 24hs</h4>
          </div>
        </div>
      </div>
    </div>

Enrique Alexis Lopez Araujo

student•

Ena seccion las imagenes no corresponden al mismo tamaño, y las palabras se suben una con otras por que en el curso si se ven bien??

Enrique Alexis Lopez Araujo

student•

Le agrege el siguiente estilo a img:

#info-container img{

height: 288px;

margin: 0 auto;

margin-top: 2em;

}

solucionado

Dayan Betancourt

student•

yo hice más o menos lo mismo, le agregue: max-height: 200px;

Juan David lemus Rubiano

student•

esas imagenes no son png, cuando se descargan son con un fondo verde

Cesar David Ramírez Dimaté

student•

Si son png, lo que quieres decir es que no tienen transparencia.

Alexander Valencia

student•

++responsive images++

OSCAR ANDRES TREJO NARVAEZ

student•

como hago para activar en mi editor de texto la opcion de poner un punto o un numeral , escribr el contenido y que automaticamente se cree la etiqueta?

Diego Forero

Team Platzi•

En donde viste que se podía hacer, no he visto eso en ningún editor de texto.

OSCAR ANDRES TREJO NARVAEZ

student•

mira lo que hace el profe escribe #info-container y se crea el div, como se hace eso, otra cosa me podrias ayudar con lo de fade? en la clase de modals en bootstrap escribo la pregunta

Jose Alejandro Gonzalez Rondon

student•

una opcion para alinear los textos y que no dependan del tamaño de las imagenes es separa las imagenes y los titulos en diferentes row

Cesar David Ramírez Dimaté

student•

El problema de hacer eso, es que cuando son para pantallas pequeñas el texto no va debajo de cada imagen…

Enrique Alexis Lopez Araujo

student•

Tengo un problema con el estilo del info-container:

Cuandoe agrego el stilo asi: <div class="info-container" style="background-color: #99c84a; color: white;"> el estilo me sale.
Pero si agrego las propiedades del estilo en el app.css mi estilo no funciona para info-container, alguien sabe por que :(. hlep

Enrique Alexis Lopez Araujo

student•

Ya vi cual era el error el div lo puse con class "info-container" y es con id="info-container" en el app.css lo declare las propiedades con #info-container al hacer con el simbolo "#" es por que le asignas los estilos a un id y no a una clase :D, fe de principiantes.

Juan David lemus Rubiano

student•

para los que descarguen las imagenes y no salgan en png, este el background color que deben usar

#99c84a

Cesar Aguilar fonseca

student•

Solución al problema con el espacio de la imagen y el nombre:

y no sé porque también la imagen de calidad y soporte están desplazadas con un espacio hacia la derecha, en caso de que los pase le agregue esto:

Imágenes responsivas con Bootstrap

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman