WebSite X5Help Center

 
Phil L.
Phil L.
User

Responsive design - Different resolution images  en

Autor: Phil L.
Visitado 1763, Followers 1, Compartido 0  

Is there a way to set different image resolutions in the main content of the page for each break point?

I am having an issue where users see a heavily cropped version of some images whilst using a mobile device.

I have tried to use hide/show responsive design options but this does no work as you cannot set images to hide at higher resolutions and still be ablke to work with them at the lower ones.

Here is the live site

Thanks in advance

Publicado en
6 RESPUESTAS
John S.
John S.
User

Hello Phil

There is a lot of posts on the forum about this issue. It can be partly solved if you experiment with the Height/Width properiies of the image(s).

The best way is to have a fully transparent image in front. This image should have the dimensions you want to see in desktop - and then it is scaled ( seamless) all the way down.

See here  https://mogenshansen49.dk/  with a single image as background.

And here  https://bramminginfo.dk/riber-kergard.html  with a "slideshow" as background.

Try to resize the page.

I have set a mouse-over effect for the image.

Leer más
Publicado en de John S.
Esahc ..
Esahc ..
Moderator

Phil, because you own the PRO version you have the option to go to step 5 and create an iwzip file which includes only appropriately sized images for each resolution of your website, but as John said, use the transparent image (I use a text object https://helpcenter.websitex5.com/es/post/227181) trick to stop cropping.

Create the iwzip and then import it (this will NOT overwrite your existing project).

Leer más
Publicado en de Esahc ..
LUIZ G.
LUIZ G.
User

Olá, Philo...

Esse tipo de Objeto Slider não faz a adaptação de tamanho da imagem. O truque que vc pode usar é tentar uma altura que fique bem, principalmente nas visualizações celular, notebook e PC, e editar as imagens para que tenham seus elementos visuais mais próximos do centro possível. De preferência, que o corte ocorra em áreas da imagem que possam ser sacrificadas.

Existem outros Objetos Sliders que fazem isso de forma automática e tratam as imagens com 100% de responsividade.

Abraço.

==========================================================

Hi, Philo...

This type of Slider Object does not adapt the image size. The trick you can use is to try a height that looks good, especially in cellphone, notebook and PC views, and edit the images so that they have their visual elements as close to the center as possible. Preferably, the cropping takes place in areas of the image that can be sacrificed.

There are other Slider Objects that do this automatically and treat images with 100% responsiveness.

Hugs.

Leer más
Publicado en de LUIZ G.
Giuseppe Guida
Giuseppe Guida
User

Phil, enter this code in the Page Properties / Expert / Custom Code / Before closing the HEAD Tag:

<style>
@media (max-width: 959.9px) and (min-width: 200px) {
#imObjectContentSlider_86 {
min-height: 400px !important;
}
}
</style>

Leer más
Publicado en de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

P.S. With my code applied online the result on your site is this ...

etc. etc.

Best regards

Leer más
Publicado en de Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes ESUsuario del mes PT
Phil L.
Is there a way to set different image resolutions in the main content of the page for each break point? ... ... ... 

(It > En) ... it would be possible to do this by setting up the images for lower resolutions on the net and adding EXTRA code...
(... always to be done if you are minimally experienced on the WEB ...)
...
... first and rare rule of "savoir faire":  rationality and congruity ...
1(16:9) | 1(4:3) | 1(2:1) | 1(1:1) | 5(3:2)
... excessive total weight for 8 images, 9.5 MB, (they should weigh a total of 1/6° - 1/8°  | max 1200-1400 KB)...
... since CSS COVER technology is used, the most suitable images to use for horizontal and vertical windows should be in ratio (1:1), and depending on the orientation you will not see the excess areas, with the central part always in the center...

.

hello, ciao

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪