Home › Forums › Porto – Responsive HTML5 Template › Aspect Ratio Coding
- This topic has 14 replies, 2 voices, and was last updated 7 months, 2 weeks ago by
Minimal1964. This post has been viewed 629 times
-
AuthorPosts
-
June 15, 2024 at 8:37 pm #10044964
Minimal1964
ParticipantHey Guys,
I am having trouble resizing images to fit in both the Architecture 2 template where at the top of the index page you have two images in a carousel and the Auto Services image at the top of the index page.
I have tried adjusting with online tools or Photoshop and the problem (as you have indicated previously) is always the images that I am trying to use has an aspect ratio that does not work with the templates coding.
I don’t have an option with these two templates that I am changing for clients because they have provided the photos.
Can I change the code to allow the templates to automatically make the images fit when I import them and replace your blank images please? This would have to be responsive across devices please.
If you could advise how I can do this going forward I will not have to reach out to you again on this subject.
Template Version: Architecture 2 & Auto ServicesJune 16, 2024 at 11:15 pm #10044966Support
KeymasterHello, I’m sorry but unfortunatelly it’s not possible, for both cases (Architecture 2 & Auto Services) you’re going to follow the original aspect ratio of the images and crop the images you want to use showing the most important part of the image. To change that you would have to make many more changes in the code and change the design itself of the template, which is not included in the support we provide here (customization for the buyer needs). The online crop tool that we suggested before is the best option: https://www.iloveimg.com/crop-image
Thanks.
June 16, 2024 at 11:35 pm #10044967Minimal1964
ParticipantThis reply has been marked as private.June 17, 2024 at 3:53 am #10044968Support
KeymasterHello, it’s because that design was created that way, with a fixed aspect ratio for the images, not the standard pattern, like 800×600. You can change the way the images shows, changing background-size, background-repeat, etc… Like this:
<div class="custom-slider-background overflow-hidden"> <div class="custom-slider-background-image-stage-outer appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1600"> <div class="custom-slider-background-image-stage"> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img1); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img2); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img3); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img4); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> </div> </div> <div class="custom-slider-background-image-stage-outer appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1600"> <div class="custom-slider-background-image-stage reverse"> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img4); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img3); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img1); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img2); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> </div> </div> </div>
It will make the image appear, showing all parts of the image (not cropped), but the design will be different, the area of the images will be different, the height will be smaller.
Note: It’s impossible to show images with different aspect ratios in the same area showing all parts of the image.
June 17, 2024 at 7:02 pm #10044969Minimal1964
ParticipantThis reply has been marked as private.June 20, 2024 at 4:57 am #10044970Minimal1964
ParticipantThis reply has been marked as private.June 20, 2024 at 7:54 am #10044972Support
KeymasterThis reply has been marked as private.June 22, 2024 at 10:21 pm #10044979Minimal1964
ParticipantThis reply has been marked as private.June 24, 2024 at 10:21 pm #10044983Support
KeymasterThis reply has been marked as private.June 25, 2024 at 4:03 am #10044984Minimal1964
ParticipantThis reply has been marked as private.June 25, 2024 at 4:41 am #10044985Support
KeymasterThis reply has been marked as private.June 25, 2024 at 4:48 am #10044987Support
KeymasterThis reply has been marked as private.June 25, 2024 at 5:07 am #10044989Minimal1964
ParticipantThis reply has been marked as private.June 25, 2024 at 5:18 am #10044990Support
KeymasterThis reply has been marked as private.June 25, 2024 at 5:23 am #10044991Minimal1964
ParticipantThis reply has been marked as private. -
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.