-3

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

1
  • 1
    Esta 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

2 respuestas 2

1

Te recomiendo que utilices %. Por ejemplo:

img {
  width: 100%;
  height: auto;
}
11
  • 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'...
    – track3r
    Commented 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
  • si, es correcto
    – track3r
    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
1

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%;
  }

6
  • 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.
    – track3r
    Commented el 29 ene. 2018 a las 17:09
  • eso de tag with te refieres a html? Commented el 29 ene. 2018 a las 17:10
  • 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%'>
    – track3r
    Commented 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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.