No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Agregando imagen

16/26
Recursos

¿Cómo integrar una imagen y ajustar su tamaño en tu página web?

En este proceso, añadir una imagen a tu proyecto web puede parecer una tarea sencilla, pero si no se hace correctamente, la imagen puede romper con la estética de tu diseño. Para lograr una implementación correcta y lograr que tu imagen mantenga su cohesión visual con el resto del contenido, es necesario seguir estos pasos y cuidar ciertos detalles.

¿Cómo se añade la imagen al código?

Para implementar una imagen en tu código HTML, sigue los siguientes pasos:

  1. Ubicar la imagen en el proyecto: Asegúrate de que la imagen esté en el directorio correcto de tu proyecto. En este caso, se encuentra en la carpeta correspondiente dentro del proyecto del blog.

  2. Agregar la etiqueta HTML: Añade el siguiente código en el lugar donde deseas que aparezca la imagen:

    <img src="ruta/de/tu/imagen.jpg" alt="Descripción de la imagen">
    
  3. Configuración en CSS: Luego, accede al archivo CSS para ajustar el tamaño según tus necesidades. Por ejemplo:

    .tu-clase-imagen {
      width: 85%;
    }
    

¿Cómo solucionar problemas comunes de dimensiones?

Es común enfrentar problemas relacionados con el tamaño de las imágenes y cómo se adaptan al layout del sitio web. Estos son algunos consejos para solucionarlos:

  • Utilizar porcentajes: Como el contenedor (body, div) puede cambiar de tamaño, utiliza dimensiones en porcentaje para que la imagen se ajuste dinámicamente:

    img {
      width: 85%;
    }
    
  • Añadir clases específicas: Si hay conflictos con otras configuraciones del sitio, genera una clase específica para la imagen e intégralo cuidadosamente en CSS para asegurar que no interfiera con otros elementos.

¿Cómo mejorar el diseño con márgenes y paddings?

Los detalles como márgenes y paddings son cruciales para mantener un diseño estético y funcional. Asegúrate de que estos ajustes mejoren la experiencia visual en tu web.

  • Añadir márgenes y paddings: Implementa márgenes y paddings para mejorar la alineación y el espaciado:

    .contenido {
      margin: 20px;
      padding: 0 40px;
    }
    
  • Uso de bordes: Agregar bordes puede proporcionar un efecto definido en ciertos elementos:

    .titulo {
      border-bottom: 1px solid #ccc;
      text-align: center;
    }
    

¿Cómo estructurar múltiples artículos en columnas?

Cuando trabajas con múltiples artículos en una página, es esencial tener una estructura organizativa clara. Esto se puede lograr usando columnas.

¿Cómo clonar estilos para varios ítems?

Si necesitas replicar el mismo estilo en varios artículos, la técnica de clonación es útil:

  1. Establece un estilo base: Diseña uno de los artículos con el estilo deseado.

  2. Incluye los estilos: Usa un sistema para integrar los estilos clonados en otros artículos, asegurando que conserven la coherencia visual.

  3. Organiza en columnas: Implementa un diseño de columna para distribuir los artículos en la página de manera equilibrada:

    .articulos {
      display: flex;
      flex-wrap: wrap;
    }
    .articulo {
      flex: 1 0 30%;  /* Ajuste a tres columnas */
      margin: 10px;
    }
    

Al seguir estos pasos, determinarás cómo tus imágenes y artículos no solo se integran, sino que también mejoran la experiencia de usuario. Ahora estás un paso más cerca de crear un sitio web más atractivo y funcional. ¡Continúa explorando y aprendiendo nuevos trucos para mejorar tus habilidades de desarrollo web!

Aportes 57

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Cada vez más independiente. :’)

Así va quedando, agregué un overlay para indicar cuántos likes y comentarios tiene cada post.

no me base en el diseño del video

No se si sirva el comentario, pero pueden evitar la parte de definirle el border-bottom al “h3”, haciendo uso de una etiqueta que dibuja una linea de separación, “hr

Amigos que tienen problema con el scroll, recuerden quitar de la etiqueta body los estilos que se pasaron a la clase .home-body.

Quedaría así:

body {
font-family:‘Robot Mono’, monospace;
margin: 0;
padding: 0;
}

home-body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

En que momentos es correcto usar una imagen como tag “img” o como background?

Wow no sabía que poniendo un % en el width ayudabas a que la imagen se acomode conforme mueves el tamaño del navegador!🤯

Realice el cambio que dijo Diego pero no me resulto, tuve que agregar un display: content para que me aparezca el scroll. Alguno mas le paso?

Gracias, me ha servido de mucho este curso. Así va quedando mi plantilla! 😃

Los curso de Diego Degranda son una exquisitez. Me encanta el enfoque pragmático que imprime en sus enseñanzas, va al grano, se aprende haciendo. Está valiendo la pena cada centavo y cada minuto de inversión.

Así quedó en mi estilo:

Tuve ciertos problemas con las clases y la maquetación de la página web, así que los que hice y les recomiendo, es que ustedes traten de maquetar cada parte y usen la clase como una guía, no solo ir copiando lo que vemos en pantalla, porque al final es una mala práctica, además, cada persona piensa distinto, por lo que cada quien puede solucionar de distintas maneras el mismo problema.

Haciendo el proyecto mio!

Tratando de hacer el ejercicio por mi cuenta, había caído en cuenta del error del scroll en blogs.
Pensé en hacer cambiar los estilos de todos los que requieran scroll, pero cambiar para que solo la que no necesita scroll lo haga es más fácil 😅

responsive design

Recuerden siempre por buenas practicas, tomar la imagen usar paginas para reducir el tamaño de las mismas, ya que en promedio nuestras imagenes deberian pesar 120kb aprox

la forma de generar scroll es de esta forma
.home-body{
top: 0;
bottom: 0;
right: 0;
left:0;
overflow: scroll;
}

Si a un elemento con grid, le aplicas porcentajes en su tamaño, tomará el porcentaje de la celda en la que esté, lo que hace que se adapte al tamaño de la celda.

La termine ,les dejo el una screenshot y el codigo me encantaria recibir su feedback .Saludos

CSS

.blogs-main{
    display:grid;
}
.blogs-news-container{
    background-color: #e6e9ed;
    padding:0 50px 40px;
}
.blogs-main-new{
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows:2fr;
}
.blogs-news-img-container{
    grid-column:1;
}
.blogs-news-img-container img {
    width:85%;
}
.blogs-news-info-container{
    grid-column:2;
}
.blogs-news-info-container p {
    margin-bottom:35px;
}
.blogs-posts-container{
    padding: 0 50px 40px;
}
.blogs-posts-container h3{
    border-bottom:1px solid #cdd2da;
    padding-bottom: 20px ;
    text-align:center;
    
}
.blogs-posts-container div {
    display:grid;
    grid-template-columns: repeat(3,2fr);
    grid-auto-rows: auto;
    gap: 20px;
}
.blogs-posts-container .post-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.blogs-posts-container .post-container img {
    width: 100%;
    align-self: center;
    margin-top: 5px;
}
.blogs-posts-container .post-container a {
    font-size: 12px;
    border: 1px solid #48cfad;
    width: 100px;
    padding: 8px 4px;
    margin:10px 0 3px 10px;
    text-align: center;
}
footer{
    margin-top: 40px;
    border-top: 35px solid #48cfad;
    height: 60px;
    display: flex;
    justify-content: center;
    background-color: #22272d;
}
footer p {
    color: white;
    font-weight: bold;
    align-self: center;
}

Muy buena clase 😃

Momento en el que explica porqué la página no genera scroll. Debido a la posición Fixed que se colocó al body en el home con los valores de top, left, rigth y botto, en cero (0).

Genial cada día más seguro del pensamiento de maquetador CSS!!! 😃 😃

Y así le di mi toque a la página de blogs: ![](https://static.platzi.com/media/user_upload/upload-17995b44-8b18-406d-9cc0-e5a18d679923.png)
Otra vez debio ser mobile first el diseño

Las medidas relativas como porcentaje y fr facilitan que los elementos imagenes, texto, etc puedan escalar mas facilmente

Porque lo maquete diferente, me toca poner el border-bottom en un lugar diferente xd

La imagen es una animación que saque de https://www.pixeltrue.com/ y esta en json

Siento que es mejor y menos enredo generar para el blogs otro css y no trabajar lo en el principal.

Tambien funciona asi
.home-body{
overflow-y: scroll;
scroll-behavior: smooth;
}

Asi va quedando banda

Así va quedando con maquetación MovileFirst
Si hay algo que pueda mejorar les agradezco sus comentarios.

Amigos, tengo un problema, me queda así. ayudenme porfavor.

Excelente profesor

De esta manera evitamos hacer scroll

position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

Me encantaa! Estoy haciendolo con mis fotillos y colores

Sigamos 😄

Muy clara la clase, que buena!

Todo quedando genial!

Igual que los compañeros tenía problemas al principio en la vista blogs, pero siguiendo los pasos indicados en el video al crear la clase en la etiqueta body de index.html y separar las propiedades originales del body hacia esta clase se soluciona el problema.

Excelente.

Genial, gran clase

sigamos aprendiendo 😄

VA QUEDANDO GENIAL

Puliendo detalles.

cerca del final de este gran proyecto 😝

Me gusto esa forma de darle una clase al body, para que solo afecte a nuestra pantalla principal el position: fixed.

joder!!! claro body también es una etiqueta, yo haciendo malabares con mi código.

muy bien, estoy aprendiendo muchos trucos sobre maquetacion!

Perfecto! 😄

Va quedando super… Excelente clase!

Yo tuve con confusión con la clase .home-body pero la solucioné así

.home-body {
    margin: 0;
    padding: 0;
    position: initial;
    font-family: 'Roboto mono', monospace;
}```

Espero que les haya servido

Lo del scroll no me quedo muy claro, debo ejecutarlo en código para ver tal me va.

Me agrada, me grada mucho lo que veo. Voy a practicar lo de las imágenes porque las he colocado es en css y no desde el html. ✅💪👨🏻‍💻🤓📈👍

Interesante. 🤔 En general me provoca algunos dolores de cabeza el alineamiento de las imágenes.