La fonction de suggestion automatique permet d'affiner rapidement votre recherche en suggérant des correspondances possibles au fur et à mesure de la frappe.
nov. 27, 20198:10 AM - modifié nov. 27, 20198:13 AM
Contributeur
Centre an image horisontally
Résolue
Hi,
I need your help with understanding how and where I make the needed change in order to make an image:
1. adjust to the width of the webbrowser
2. centre itself horisontally
Example:
origum.se/honeywell
The page on the link above works like all other pages on the website and my issue is that I only see the top of the banner image. I want it to adjust/scale automatically and adapt to the browser window and at the same time also focus on the horizontial centre part of the image - not the top, like now.
On mobile though, I'd like the image to be stretched vertically and centered.
Based on your third image (of the page viewed in a mobile), I've added an image that I hope explains it. This should be the case for mobiles as well as tablets. In my coded example above, I'm still only focusing on the desktop part (which works as it should), and the mobile (not working yet).
In the image below, it's not the one your using, but I think you get the idea. Stretch vertically and center. 🙂
To adjust on mobile, you will edit the .parallax-banner class that is inside @media.
@media all (max-width: 767px){
.parallax-banner {
background-size: auto 100%; ....
See below the two options:
In this case use: "background-size: 100% auto".
In this case use: "background-size: auto 100%".
The first value is width control, and second value ir height control. Then when we use "background-size 100% auto", we are define to image background fill 100% width, and auto is to relative height. Is normal in mobile version we reverse this code for class, to "background-size: auto 100%", for fill 100% height and width relative.
Please, if this content is what you are looking for, mark it as a solution.
I will implement the code on almost all webpages on the site, because I think this would be the "normal" way of displaying banners. It bugs me that there's no easy way of changing this thing when working in the CMS - with specific images. Sometimes I want images in a blog post or on a page to behave like this and being able not to code things, it would be handy to not only just choose alignment of an image - but also other features, like center it or in this case strech it vertically.
Nevertheless - @DanielSanchez - you're the saviour of the month. Thank you! This thing has bugged me for years. 🙂
nov. 27, 20199:50 AM - modifié nov. 27, 201910:08 AM
Contributeur
Centre an image horisontally
Résolue
I received some excellent help from a HubSpot employee and it turns out I needed to change some code in the Hubl source for that particular module. On a desktop, everything is working out perfectly:
In an iPhone (and perhaps iPad) i'd like the image to behave as below (cover?), which would make me perhaps only see the middle barcode scanner in the image: