0

I'm trying to make my hero images responsive. In normal they are 16:9 but in the mobile version I wanted the browser to display another image that I made in 1:1 ratio. However, on some devices it still shows the 16:9 version. This goes especially for the Samsung Galaxy S6.

I can't really wrap my head around the solution, and to be honest I do not have any similar products near me to be able to test it back and forth.

I know I'm missing a lot. I am blacked out right now..

<img src="{{ 'mainad1-image-2880.jpg' | asset_url }}" width="2880" srcset="
{{ 'mainad1-image-406.jpg' | asset_url }}  406w, 
{{ 'mainad1-image-608.jpg' | asset_url }}  608w, 
{{ 'mainad1-image-800.jpg' | asset_url }}  800w, 
{{ 'mainad1-image-1024.jpg' | asset_url }}  1024w, 
{{ 'mainad1-image-1050.jpg' | asset_url }}  1050w, 
{{ 'mainad1-image-1200.jpg' | asset_url }}  1200w, 
{{ 'mainad1-image-1440.jpg' | asset_url }}  1440w, 
{{ 'mainad1-image-1920.jpg' | asset_url }} 1920w, 
{{ 'mainad1-image-2880.jpg' | asset_url }} 2880w" 
sizes="(max-width: 2880px) 100vw, 2880px" 
alt="{{ settings.mainad_1_alt_text }}"/>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Robin
  • 45
  • 8
  • I'm not sure but you can test this [ https://jsfiddle.net/tjbaezid/pdvj20u1/ ] use the class and the css on your side and you don't need those width and height if this css property is working on your side – Baezid Mostafa Oct 29 '16 at 12:21

1 Answers1

0

Changing the aspect ratio of images based on the viewport width is one of the Art Direction use cases for responsive images.

It can only be addressed with the <picture> syntax.

The srcset attribute only deals with images that keep the same aspect ratio and content on all viewport widths.

Nicolas Hoizey
  • 1,954
  • 1
  • 17
  • 24