Responsive base apparel coming soon page

Community feedback

• 

  Brayan Miza•560

  @bramizdevPosted over 1 year ago

  You can use the <picture> HTML tag.

  It is used to provide multiple versions of an image and allows the browser to select the most appropriate version based on the device's capabilities, such as screen size or resolution. It's commonly used for implementing responsive images.

  <picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
  </picture>
  

  Inside the <picture> tag, you will include one or more <source> elements. Each <source> element represents a different version of the image.

  Within each <source> element, you need to specify the srcset attribute, which points to the image source file, and optionally the media attribute, which defines the conditions under which the image should be used. The srcset attribute can include multiple image sources separated by commas.

  The media attribute is used to define media queries. It allows you to specify different image sources based on factors like screen size, pixel density, or other device capabilities. The media queries should be written using CSS media query syntax.

  Finally, include an <img> element within the <picture> tag. This <img> element will serve as the fallback image, displayed if none of the <source> elements match the conditions specified by the media attribute.

  Make sure to provide the alt attribute for the <img> element, which describes the image for accessibility purposes.

  source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

  0
• 

  ThanHtike（テンタイ）•110

  @CGM-ThanHtikePosted over 1 year ago

  The effiicient way of switching images is using source element

  I'll show u an example

  <picture>
  <source media="(max-width: 639.9px)" srcset="images/image-product-mobile.jpg">
  <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg">
  <img src="images/image-product-desktop.jpg" alt="photo of Gabrielle Parfum bottle">
  </picture>
  

  In this line of code, product mobile will be shown at the breakpoint lower than 640px. And the product desktop will be shown at the breakpoint higher than 640px.

  I hope this might help

  0