Responsive landing page using CSS Flexbox

Community feedback

• 

  Douo•940

  @DouooPosted about 1 year ago

  Congrats on finishing the challenge 🎉. I have to say the choice between using width: 100% and max-width: 100% for the <img> tag depends on what you want to achieve with your images and how your layout is structured.

  1. width: 100%: This CSS rule will make the image take up 100% of the available width of its containing element. If the containing element's width changes, the image will scale accordingly.

  • Note that this can lead to image distortion if the image's aspect ratio is different from its container (since 100% refers to the parents width).

  2. max-width: 100%: sets the maximum width of the image to 100% of its containing element's width. This is commonly used to ensure that the image doesn't exceed its natural size and maintains its aspect ratio while resizing. It's a good choice for responsive design when you want the image to scale down to fit the container but not exceed its original dimensions.

  Remember, using a <div> to wrap an <img> can be a helpful technique, especially if you want more control over the layout and the behavior of the image. For example, you can use a <div> to create a container for the image and then apply a max-width: 100% to the image inside the <div>. This can be useful for adding padding, margins, or other stylings to the image container.

  Hope this helps you understand when to use width:100% and max-width:100% on imgs 😊

  Marked as helpful

  1