Hi,
I also think that your image is only 1000px wide, so it is not stretching for the width of the website, which is higher than that. You can’t see it in Blocs app editing mode, because you set the Zoom level to 50%
I too come from a graphic design background, so I feel your pain. However, what you need to understand first and foremost is that designing for the web is very different from designing for the print world.
Web pages are not static size pieces of paper (A4, A5, A6 etc.). In print, its relatively straightforward. You lay out image placeholders to exact dimensions so they look how you want them on a static page size. In the process, when you add images to the placeholders you can scale and crop the images to fit perfectly within each of the placeholders.
In web design, particularly in framework environments, images will always be placed to fit the width of the column containing them. The height of the placed image will be determined by the aspect ratio of the image. This avoids distortion of the image.
So, you have two options. The first is to crop the images to an aspect ratio that suits your purpose, basically, ensuring that the height of your landscape images plus the gutter between them is equal to the height of your portrait image. When placed, they will line up exactly as you want them.
The second option is to place your images and then adjust the horizontal gutter between the landscape images so that they all line up perfectly. This is the easiest option to deal with because it simply needs a custom class assigned to one of the horizontal images to make its baseline align with the baseline of the portrait image.
For example.
Moi aussi, je viens d’un milieu de conception graphique, donc je ressens votre douleur. Cependant, ce que vous devez d’abord comprendre, c’est que la conception pour le Web est très différente de la conception pour le monde de l’impression. Les pages Web ne sont pas des morceaux de papier de taille statique (A4, A5, A6, etc.). En version imprimée, c’est relativement simple. Vous disposez les espaces réservés de l’image aux dimensions exactes afin qu’ils ressemblent à ce que vous voulez sur une taille de page statique. Dans le processus, lorsque vous ajoutez des images aux espaces réservés, vous pouvez redimensionner et rogner les images pour qu’elles s’adaptent parfaitement à chacun des espaces réservés. Dans la conception Web, en particulier dans les environnements de framework, les images seront toujours placées pour s’adapter à la largeur de la colonne qui les contient. La hauteur de l’image placée sera déterminée par le rapport hauteur / largeur de l’image. Cela évite la distorsion de l’image. Donc, vous avez deux options. La première consiste à recadrer les images dans un rapport d’aspect qui convient à votre objectif, en gros, en veillant à ce que la hauteur de vos images de paysage plus la gouttière entre leur est égal à la hauteur de votre image portrait. Une fois placés, ils s’aligneront exactement comme vous le souhaitez. La deuxième option consiste à placer vos images, puis à ajuster la gouttière horizontale entre les images de paysage afin qu’elles s’alignent toutes parfaitement. Il s’agit de l’option la plus simple à gérer car elle nécessite simplement une classe personnalisée affectée à l’une des images horizontales pour aligner sa ligne de base sur la ligne de base de l’image portrait. Par exemple.
The above procedure ensures that the whole of your images are visible (no cropping) and that they are spaced to display correctly. In other words, the sum total of the landscape image heights ( 321 + 321) plus the height of the horizontal margin (79) equals the height of the portrait image (721).
If you now switch to the next viewport (MD) you will see that the images are no longer aligned correctly, as illustrated below.
La procédure ci-dessus garantit que l’ensemble de vos images est visible (pas de recadrage) et qu’elles sont espacées pour s’afficher correctement. En d’autres termes, la somme totale des hauteurs d’image paysage (321 321) plus la hauteur de la marge horizontale (79) est égale à la hauteur de l’image portrait (721).
Si vous passez maintenant à la fenêtre d’affichage suivante (MD), vous verrez que les images ne sont plus correctement alignées, comme illustré ci-dessous.
To correct this, simply make an adjustment to the class you created for the bottom landscape image. Select the image and follow the instructions below:
Pour corriger cela, ajustez simplement la classe que vous avez créée pour l’image de paysage inférieure. Sélectionnez l’image et suivez les instructions ci-dessous:
If you now switch back to the LG viewport, you will see that the images are still aligned for that viewport. This is because custom classes can be adjusted for each viewport. If you switch to the other viewports, you can make similar adjustments. In the case of my example, switching to the SM viewport, my images are placed vertically, one on top of the other, with the bottom landscape image having no space between it and the portrait image below it. So, by selecting the bottom landscape image I can open the class editor again and add some bottom margin to the image to create a gutter. It looks like this:
Si vous revenez maintenant à la fenêtre LG, vous verrez que les images sont toujours alignées pour cette fenêtre. En effet, les classes personnalisées peuvent être ajustées pour chaque fenêtre. Si vous passez aux autres fenêtres, vous pouvez effectuer des ajustements similaires. Dans le cas de mon exemple, en passant à la fenêtre SM, mes images sont placées verticalement, l’une au-dessus de l’autre, l’image paysage inférieure n’ayant aucun espace entre elle et l’image portrait en dessous. Donc, en sélectionnant l’image de paysage en bas, je peux ouvrir à nouveau l’éditeur de classe et ajouter une marge inférieure à l’image pour créer une gouttière. Cela ressemble à ceci:
You have now created a custom class that should adjust your image layout to suit three of your viewports. Select the final XS viewport to make adjustments for your final breakpoint.
Vous avez maintenant créé une classe personnalisée qui devrait ajuster la mise en page de votre image en fonction de trois de vos fenêtres. Sélectionnez la fenêtre XS finale pour effectuer des
Images Courtesy of The Ride Academy - Unsplash.com
Translation: Mate Translate app
Images courtoisie de The Ride Academy - Unsplash.com
Traduction: application Mate Translate
2 Likes
The problem is his two square images are to big compare to the other one. I mean if you put the both together its have the same width.
Amazing explanation by the way!
1 Like
THANKS THANKS MANY THANKS !!
I just succes what I want ! 
Thanks to you ! 
2 Likes
@Pixi In your second example, the top picture appears to have gutters enabled for the row containing the large image. This will place white space on either side of the image. Uncheck the include gutters option to remove the space.
It may be helpful to others if you can explain how finally you resolved the issue.
Dans votre deuxième exemple, l’image du haut semble avoir activé les gouttières pour la ligne contenant la grande image. Cela placera un espace blanc de chaque côté de l’image. Décochez l’option Inclure les gouttières pour supprimer l’espace.
Il peut être utile aux autres si vous pouvez expliquer comment vous avez finalement résolu le problème.