CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
kenreal
kenreal

Reputation: 101

Loading same content by using hidden-xs and visible-xs

here is the problem I faced and I wondering any other efficient way to solve it. Recently I develop a e-commerce website. This website is a reponsive website.

  1. Hidden-xs for desktop view, visible-xs for mobile view.
  2. This is because sometime the style looks good in desktop view, but not user-friendly in mobile view.
  3. For example, an image/div perfectly display in desktop view, when it comes to mobile view, it may become oversize. I don't have to fix my image size because the image already cut in same size.
  4. To control this, I use hidden-xs and visible to create two div for desktop and mobile view.

What I done:

  1. I tried cut my image into two size, which are mobile and desktop. When website detect it is in mobile view, it will reload and display the mobile view image. This method make me have to cut the image when I upload.
  2. Hidden-xs and visible-xs

Question:

  1. Is that any possible way to load same image in mobile view and desktop view without cut the image in 2 size and creating 2 div?
  2. Creating 2 div will take times to load, and it is pre-load two div image although it takes lesser time.

Thanks.

Upvotes: 0

Views: 556

Answers (2)

Maharkus
Maharkus

Reputation: 2898

Here's one way to display different images without using two divs. The browser will only load the image appropriate to the screen size determined in the media - attribute. Open the snippet in full page and decrease the size of the browser window to see the result.

<picture>
  <source media="(min-width: 487px)" srcset="http://via.placeholder.com/350x150">
  <source media="(max-width: 486px)" srcset="http://via.placeholder.com/150x150">
  <img src="http://via.placeholder.com/350x150" style="width:auto;">
</picture>

This can also be done only using srcset:

<img srcset="http://via.placeholder.com/350x150 776w,
             http://via.placeholder.com/150x150 486w">

You can get more information about responsive images at MDN.

Upvotes: 0

kenreal
kenreal

Reputation: 101

This is what I get. But this method also required two image. But no need pre-load two image in two div.

  1. Use php to detect the browser size/device.
  2. If the size in desktop, display the desktop view image.
  3. If the size in mobile, display the mobile view image.

Upvotes: 0

Related Questions