search

sitegeist / sms-responsive-images

This TYPO3 extension provides ViewHelpers and configuration to render valid responsive images based on TYPO3's image cropping tool.
GNU General Public License v2.0
34 stars 19 forks source link

Images have wrong size #10

Closed steffenk closed 6 years ago

steffenk commented 7 years ago

I use these image settings in CE: bildschirmfoto 2017-10-18 um 13 01 59

Without sms-responsive-images, i have one row centered with images of width 500px, as configured. bildschirmfoto 2017-10-18 um 13 01 08

If i activate sms-responsive-images, i get one row centered with images, each with width 235px. bildschirmfoto 2017-10-18 um 13 02 28

Looking to source, the images have 500px in html-tag: <picture><source srcset="https://loop.min-themes.de/fileadmin/fotos/samples/900/20080601-NSC_4427.jpg 1000w, https://loop.min-themes.de/fileadmin/fotos/samples/900/20080601-NSC_4427.jpg 1200w, https://loop.min-themes.de/fileadmin/fotos/samples/900/20080601-NSC_4427.jpg 1400w, https://loop.min-themes.de/fileadmin/fotos/samples/900/20080601-NSC_4427.jpg 1600w, https://loop.min-themes.de/fileadmin/fotos/samples/900/20080601-NSC_4427.jpg 1920w" media="(min-width: 768px)" sizes="(min-width: 500px) 500px, 100vw"><source srcset="https://loop.min-themes.de/fileadmin/_processed_/d/5/csm_20080601-NSC_4427_abf878acc8.jpg 800w" media="(min-width: 538px)" sizes="(min-width: 500px) 500px, 100vw"><source srcset="https://loop.min-themes.de/fileadmin/_processed_/d/5/csm_20080601-NSC_4427_aeb738e5ce.jpg 500w" media="(max-width: 534px)" sizes="(min-width: 500px) 500px, 100vw"><img class="image-embed-item" srcset="https://loop.min-themes.de/fileadmin/_processed_/d/5/csm_20080601-NSC_4427_0740aa52e5.jpg" width="500" alt=""></picture>

Do you see where the problem is?

thx, greets

s2b commented 6 years ago

Sorry for not responding to your issue, it must have slipped through.

It seems to me like this is a CSS problem. TYPO3's styling and markup for those multi-column images is pretty strange and outdated in my opinion. I tend to overwrite at least parts of it and I often restrict the image options in the backend heavily (no height and width fields, only 1 and 2 columns). Then I can define the image sizes in CSS (something like 50%). If you're dealing with responsive webdesign, manually specified image sizes are a bit absurd anyways.