Blog Preview Card

Community feedback

• 

  Reno G•60

  @pamplitoPosted 7 months ago

  Hello,

  Your blog preview card looks great. Congratulations! As a beginner, I'm not sure if it's the best method, but I use "object-fit" to manage the image size in a responsive way.

  All the best !

  Marked as helpful

  0
• 

  Flóra•180

  @Glorit74Posted 7 months ago

  I use this setup and it usually gives the expected result The images are enclosed in a div (for example img_container) .img-container { width: 100%; border-radius: 15px; overflow: hidden; /* it hides the corners / } img { width: 100%; / image fills the container div, it takes on the largest possible size / dispaly: block; / remove default margin-bottom / object-fit: cover; / keeps aspect ratio */ } Always write something in the alt tag, everyone always complains about it. :-)

  There is a typo in line 59 (style.css) font-weight: 1rem; instead of font-weight: 400; You can easily find such errors in the browser inspector

  0
• 

  Flóra•180

  @Glorit74Posted 7 months ago

  I use this setup and it usually gives the expected result The images are enclosed in a div (for example img_container)

  .img-container {
  	width: 100%;
  	border-radius: 15px;
  	overflow: hidden;	/* it hides the corners */
  }
  img {
      width: 100%;  /* image fills the container div, it takes on the largest possible size */
     dispaly: block; /* remove default margin-bottom */
     object-fit: cover; /* keeps aspect ratio */
  }
  

  Always write something in the alt tag, everyone always complains about it. :-)

  There is a typo in line 59 (style.css) font-weight: 1rem; instead of font-weight: 400; You can easily find such errors in the browser inspector

  0