Esta es mi página web https://alexandrawp.herokuapp.com/ y aqui está un ejemplo del tamaño de las imagenes https://alexandrawp.herokuapp.com/paginas%20principales/traducir%20texto.html https://alexandrawp.herokuapp.com/paginas%20principales/enviar%20mensaje%20masivo.html las imagenes son entre 700 y 800 pixeles y más pequeñas. Me pueden dar en codigo css para que queden adaptable a la pantalla y para que también permita hacer zoom a las imagenes
-
1Esta pregunta ha sido marcada como de muy baja calidad por la comunidad. Lee Cómo preguntar y edita la pregunta para añadir más información: añade el código en la propia pregunta, lo que hayas intentado, los errores/dificultades que te estés encontrando...– Alvaro Montoro ♦Commented el 29 ene. 2018 a las 17:21
Añade un comentario
|
2 respuestas
Te recomiendo que utilices %. Por ejemplo:
img {
width: 100%;
height: auto;
}
-
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# Commented el 29 ene. 2018 a las 17:10
-
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'...– track3rCommented el 29 ene. 2018 a las 17:11
-
y que pasa si lo pongo asi img.res? y al girar el celular la imagen se adaptara a los dos anchos del celular? Commented el 29 ene. 2018 a las 17:13
-
-
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. Commented el 29 ene. 2018 a las 17:14
Lo que preguntas es muy complejo, como alternativa, te sugiero que uses width: 100% en las imágenes para que ocupen todo el ancho de la pantalla sea cual sea el ancho de ésta. Hay imagenes cuyo tamaño esta bien en computadora y que se ve mas pequeñas pero en celulares o en tabletas ocupan un poco mas del 100%, ¿serviria poner algo asi:? o porfavor diganme algo similar, vean esta página para que sepan a lo que me refiero https://alexandrawp.herokuapp.com/paginas%20principales/acceso%20incognito.html
@media (max-width: XXXpx){
.modal-ancho{
width: 90%;
}
-
eso lo pongo en el documento html o en css?, porque en html <img src: ""> se le puede agregar el ancho Commented el 29 ene. 2018 a las 17:08
-
Si, lo puedes poner en el tag width de la propia imagen, el resultado no es el que pides, pero se verá mejor hasta que encuentres otra cosa.– track3rCommented el 29 ene. 2018 a las 17:09
-
-
Lo puedes poner de las dos formas, 3 en realidad: en la imagen en el html con width="100%" en el css con una clase o objeto: img { ... } o en un estilo en la propia imagen: <img src='' style='width:100%'>– track3rCommented el 29 ene. 2018 a las 17:11
-
y al girar al celular sea que este de modo horizontal y vertical se adaptará si le pongo en html el with? Commented el 29 ene. 2018 a las 17:14