Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2017-07-24 08:23:40

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

Images don't scale in landscape mode ...

On this (test)site I’m using smd_macro with the srcset and sizes approach >

<figure class="{width}">
<img src='<txp:smd_thumbnail id="{img_id}" type="1200"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>' alt="" srcset='<txp:smd_thumbnail id="{img_id}" type="300"><txp:smd_thumbnail_info item="url" /> 300w</txp:smd_thumbnail>, <txp:smd_thumbnail id="{img_id}" type="600"><txp:smd_thumbnail_info item="url" /> 600w</txp:smd_thumbnail>,
<txp:smd_thumbnail id="{img_id}" type="900"><txp:smd_thumbnail_info item="url" /> 900w</txp:smd_thumbnail>, <txp:smd_thumbnail id="{img_id}" type="1200"><txp:smd_thumbnail_info item="url" /> 1200w</txp:smd_thumbnail>'
sizes="(max-width: 800px) calc(100vw - 15px), (min-width: 800px) 100vw, 1200px " />
<figcaption><txp:rah_replace from="<p>,</p>" to=",">{caption}</txp:rah_replace></figcaption>
</figure>

Everything works except when turning my iPhone 6s in landscape mode the images doesn’t scale to full width. If I tweak ‘sizes’ into only sizes="1200px" the images do scale … !? According to the specs and several tuts I think I’ve done nothing wrong. So, what’s up?

Last edited by RedFox (2017-07-24 08:24:40)

Offline

#2 2017-07-24 09:05:45

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,104
Website

Re: Images don't scale in landscape mode ...

Try adding img { width: 100% }


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#3 2017-07-24 10:19:42

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,032
Website GitHub Mastodon Twitter

Re: Images don't scale in landscape mode ...

what I normally add in the css is img {width:100%;height:auto}.

ps. the recipes look yummy!!!

Last edited by colak (2017-07-24 10:20:53)


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#4 2017-07-24 10:45:37

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

Re: Images don't scale in landscape mode ...

The most important rule to make images responsive … only it was attached to the wrong media query > @media screen and (min-width: 50em) … :o

Offline

Board footer

Powered by FluxBB