All comments

• 

  Surabhil Ssk• 10

  @surabhilssk

  Submitted over 1 year ago

  While positioning the images inside the <div> tag, the image is not behaving according to the sizing of <div> tag. How can I solve that?

  

  QR Code Website challenge using HTML and CSS

  2

  70

  

  P

  Larra• 10

  @larrasu

  Posted over 1 year ago

  You can improve the look of the card by adding more padding to the contents of the card. It's a little bit compact compared to the original design. Overall, the card component looks great!

  To answer your question, you can do so by doing this:

  img {
      width: 100%;
      height: 250px; //specify image height
      object-fit: cover; // this keeps the image's aspect ratio and fills the given sizes
  }
  

  I hope this helps. Happy coding! ✨

  Marked as helpful

  1
• 

  Aaron Li• 90

  @aaronli722

  Submitted over 1 year ago

  After the project, I have two questions:

  1. How to vertically center a span element?

  2. Is it possible to set the height of a div same as the background image? (which mean can fully show the background image with correct scale)

  

  Product preview card component using CSS

  1

  30

  

  P

  Larra• 10

  @larrasu

  Posted over 1 year ago

  Hello! Your solution looks excellent overall!

  A few things you might want to add are the rounded corners of the card component and add overflow: hidden so the image molds into the rounded corners.

  To answer your questions:

  1. You can vertically center a span element by adding Flexbox to the parent element like this:

  display: flex;
  items-align: center;
  

  1. Yes, it is possible to set the height of the div the same as the background image by adding background-size: cover to your div. If you are using an img element, you can also do it by adding object-fit: cover to your img element.

  I hope this helps! Happy coding ✨

  0