Línea de tiempo para ¿Cómo hacer que mis imagenes sean responsive desing, es decir que se adapten a una pantalla de celular sea esta horizontal o vertical?
Licencia actual CC BY-SA 3.0
12 eventos
cuándo alternar formato | qué | por | licencia | comentario | |
---|---|---|---|---|---|
el 29 ene. 2018 a las 19:57 | comentario | añadido | Alexandra Loor | lo quiero solo para celulares que a 800 px las imagenes se vean a un 100% seria algo así @media (max-width: XXXpx){ .modal-ancho{ width: 90%; } | |
el 29 ene. 2018 a las 19:54 | comentario | añadido | Edgar Gutiérrez |
@AlexandraLoor, te iba a responder, pero fue catalogada como pregunta demasiado amplia por no especificar al detalle lo que quieres hacer. Pero te recomiendo NO colocarlo en el html así <img style="width: 100%"> , sino que en tu css agregues una clase con esa propiedad así: .img-rd o .imagen-fullancho (el nombre es indiferente), con las propiedades {width: 100%; height: auto;} . Y en el html, le agregas esa clase <img class="img-rd"/> solo a aquellas imagenes que siempre quieres que ocupen el 100% del dispositivo, ya sea en vertical u horizontal.
|
|
el 29 ene. 2018 a las 17:23 | comentario | añadido | Alexandra Loor | y si le pongo with en html de 100% a todas las imagenes de tutoriales, al girar el celular si saldrian? | |
el 29 ene. 2018 a las 17:22 | comentario | añadido | Alexandra Loor | entendí amigo, seria la segunda posibilidad | |
el 29 ene. 2018 a las 17:16 | comentario | añadido | Brian Moreno | Puedes ver un ejemplo aquí: jsfiddle.net/5newew6m | |
el 29 ene. 2018 a las 17:14 | comentario | añadido | Brian Moreno | Sin embargo, te recomendaría la primera opción ya que tendrás más control sobre los estilos de los elementos. | |
el 29 ene. 2018 a las 17:14 | comentario | añadido | Brian Moreno | Hay 2 posibilidades: 1) Que le pongas una clase a las imágenes de los tutoriales y darle los estilos a esa clase. 2) Que incluyas un archivo de CSS solamente en la página de tutoriales y dentro de ese archivo CSS incluyes los estilos que escribí en la respuesta. | |
el 29 ene. 2018 a las 17:13 | comentario | añadido | track3r | si, es correcto | |
el 29 ene. 2018 a las 17:13 | comentario | añadido | Alexandra Loor | y que pasa si lo pongo asi img.res? y al girar el celular la imagen se adaptara a los dos anchos del celular? | |
el 29 ene. 2018 a las 17:11 | comentario | añadido | track3r | En ese caso, es lo mismo pero delante de img pones tu clase, por ejemplo: .res.img { y luego en tus imágenes a escalar les pones tu clase: <img class='res'... | |
el 29 ene. 2018 a las 17:10 | comentario | añadido | Alexandra Loor | eso significa que le tengo que añadir una clase a todas las imagenes insertadas en los tutoriales, porque también tengo estas imagenes pequeñas a las que no me interesa hacerles nada porque salen bien alexandrawp.herokuapp.com/home.html# | |
el 29 ene. 2018 a las 17:05 | historial | respuesta | Brian Moreno | CC BY-SA 3.0 |