the images do not fill the space and are not proportional

delinea

Images are not displayed correctly within the module. Is it possible to make the main images fill the space that contains them? and that the other images are proportional to the original images?

Ninja

delinea
Hi
This is already the max height of the image showing in the screenshot above.
Because on the right side you are 4 articles and its height is more compare to 1 in the left. the space is normal.
For the right side articles height you can add this code in custom.css file to make height 100%

.magazine-featured.style-3 .magazine-featured-intro .magazine-item-media .item-image img {
    height: 100%;}

In the left side its already max size of the image.

delinea

ok, I don't understand, the presentation is NOT visually pleasant, especially on smartphones, the images do not maintain an original aspect ratio

Ninja

delinea

can you share the URL and screeenshot of mobile issue?
On the homepage the module is no longer present. The above code will make it 100% height. Rest the images are responsive for mobile view.

Regards

delinea

All right, the module is back online on the home page.
I attach an image of how it is displayed on a smartphone, the image is deformed, it does not maintain the same original aspect ratio.

In this example an image does not fill the height of the space (as happens with the start module in JA Focus, where the images fill the space assigned to the image proportionally, without deforming)
Also the other image is flattened and is not visually correct.

Ninja

delinea
Hi
I already suggested you code for this height issue in my first reply. Kindly check and add the code to make the image 100% height. at the moment it has static height for image container to show all the title fine in every view. There is nothing related to image its already using its max size depend on aspect ratio.

delinea

You already have the code, and the presentation is very bad.
Perhaps there is another problem.

Ninja

delinea
This is no issue. On web each image responsive will resize with respect to aspects ratio.
Making the height value to 100%! Important will not force image to use a static height.

delinea

Good, but what about the wasted space (gray) that is presented under the first image (news) and the crushing that occurs with the images of the following news. It is very ugly, this presentation cannot be used on a smartphone.

Look please, as with the starter module of the FOCUS template, it is perfect. It's possible.

Ninja

delinea
I already explain this in first reply about the height there is nothing more in this i can share.
https://www.joomlart.com/forums/d/34494-the-images-do-not-fill-the-space-and-are-not-proportional/2
Set the height 100% and it will not show any gray extra space in both view.

delinea

Well, thanks for your patience, but it is evident that I did not know how to explain ... I have already placed the code and the image presentation is still wrong

Ninja

delinea
Replace the code with this

.magazine-featured.style-3 .magazine-item-media .item-image { height: 100%!important;}